Personas - an Ai Assistant
Tags: cloudflarechallenge, devchallenge, ai
Published: 2024-04-14 16:37:05


*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## What I Built and What it does
[`Personas`](https://dictionary.cambridge.org/dictionary/english/persona) is a AI assistant - a Web app demonstrating the ease with which one can build app using Cloudflare Pages Cloudflare Worker combined with Cloudflare AI which provides plethora of AI models for a wide range of tasks.

[Try Persona](https://main.cldflr-remix-app.pages.dev/)
[A 2 minute video demo](https://www.youtube.com/watch?v=N1g5LcbIgV0)

`PERSONAS` Showcases 3 `personas`

1. `Story Writer` that is kidSafe
2. `Coding Assistant` that can help a developer
3. `Sentiment Analysis & Reasoning` 

The above `personas` can take **voice** or **text** as input and will respond based on **Handrails** provided by the `system` prompt for the respective models.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eir5r2pjpeh9e0uj7quf.png)

`Story Writer` generates stories appropriate for Kids under 10 years with the option of translating to German. One can also analyse sentiment of the input prompt and seek the reasoning behind the evaluation. [tasks: _Text Generation, Transation, Voice to text_]

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7clt28t1vmfsoc9bldj.png)

`Coding Assistant` is a useful for generating small code snippets in most programming languages, including syntax highlighting. You can also ask it to explain how a particular piece of code works. I used it do some of the grunt work for this project including getting ideas for react components.[tasks: _Code Generation, and voice Voice to text_]

![Sentiment Analysis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ta7i8fjorvnso45q875.png)

`Sentiment Analysis & Reasoning` This was to demonstrate a good `system` prompt can be leverage an existing model and reduce reliance on specialist models for sentiment analysis. Here we see the the same text generation model used on `Story Writer` producing structured output as a JSON - which will be pretty useful for decision making in a chain of tasks.[tasks: _Structured text Generation, Voice to text_]

<!-- Tell us what your app does! -->

## Demo
[Try Persona](https://main.cldflr-remix-app.pages.dev/)
[A 2 minute video demo](https://www.youtube.com/watch?v=N1g5LcbIgV0)

<iframe width="560" height="315" src="https://www.youtube.com/embed/N1g5LcbIgV0?si=de9aqCGdBD2wJLS4&amp;start=3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<!-- Share a link to your deployed solution on Workers or Pages, and add a screenshot or video embed of your app here. -->

## My Code

[Code on Github](https://github.com/ugmurthy/cldflr-remix-app)

<!-- Show us the code! Share a public link to your repo and be sure to include a README file with installation instructions. We also encourage you to add a license for your code.  --> 

## Journey
I came to know about the challenge on 4th April. Initially, I wasn't planning on doing much considering I was new to Cloudflare and learning about it seemed a daunting task. 

This introductory [video](https://www.youtube.com/watch?v=YoPwfd7AljE) and the the [Cloufare Workers AI](https://developers.cloudflare.com/workers-ai/) got me started in no time.

Development process

- Tested ideas for system prompt using [Cloudflare AI playground](https://playground.ai.cloudflare.com/)
- User examples in AI tutortials to build end points
- tested the end points using [httpie](https://httpie.io/) and sometime `curl`
- Built the frontend with [REMIX-Cloudflare](https://remix.run/docs/en/main/future/vite#cloudflare)


**Multiple Models and/or Triple Task Types**

Four Models were used to achieve many tasks Story Generation, Translation, Code Generation and Sentiment analysis:

1. `@hf/mistral/mistral-7b-instruct-v0.2` two tasks:
- Story Generation, 
- Sentiment Analysis

2. `@cf/thebloke/discolm-german-7b-v1-awq` for language translation

3. `@hf/thebloke/codellama-7b-instruct-awq` for Code Generation

4. `@cf/openai/whisper` for audio to text transcription.

Some unsung heros (commands/tools/libraries) without which this would have been impossible:
- `wrangler npx wrangler pages deployment tail <deployment id>`
- `https` from [httpie](https://httpie.io/)
- `zod`, `zodix` js modules to do validation and parsing
- and last but not the least `lodash` my fav goto for anything that you think is impossible.

**Future Plans:**
- Extend Story Writer to be hands free - voice commands for stories : _hey Monk, tell me a story a picture story_
- Do Sentiment Analysis before generating stories.
- Create Custom Persona 
- Extend the App to leverage Local open source LLMs from [ollama.ai](https://ollama.com/) 
- Exploring Cloudflare LORA support for training to improve `Personas` further

**Learning** Lots of things learnt over last 7/8 days. From not knowing what is Cloudflare to deploying - I am pretty happy with the outcome.  I was proud of two components I implement 
1) Component to catch streaming data 
2) the audio component. Both were challenging 

Many Thanks to [Cloudflare](https://www.cloudflare.com/) and [dev.to](https://dev.to/) for giving us this opportunity.
<!-- Tell us about your process, the task types and models you used, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->



<!-- Let us know if your project utilized multiple models per task and/or if your project used three or more task types. If so, you may qualify for our additional prize categories! If not, please remove this section. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image or an additional tag to this post (if you want). -->

<!-- Thanks for participating! -->