How I implemented Cloudflare Workers on my app

How I implemented Cloudflare Workers on my app

This is a submission for the Cloudflare AI Challenge.

What I Built

Nottia is a Nuxt 3 simple app that you can generate notes, dont forget your ideas, just create a note! xD

In this app you also have the option to generate notes by sending prompts to an AI and receiving a response based on that prompt.

Demo

See the demo right here:

On Cloudflare Pages:
https://nottia.pages.dev/

On Vercel:
https://nottia.vercel.app/

My Code

The source code of the app was split in two repositories: one for the front-end and another for the Cloudflare Worker.

Nottia:


cn-2k
/
nottia

Project for the Cloudflare Challenge on dev.to

About this project

This project was maded for the Cloudflare AI Challenge from dev.to, it allows you to create notes with or without the help of artificial intelligence using two AI Workers models from Cloudflare to generate text (@cf/meta/llama-2-7b-chat-fp16) and generate images (@cf/stabilityai/stable-diffusion-xl-base-1.0).

The project was splitted in two repositories, check the repo related to Cloudflare Worker for this app: Nottia Worker

Techs used to build this project

Frontend

Vuejs
TypeScript
Nuxtjs
TailwindCSS
Shadcn/vue

Installation Instructions

Requirements

Git
npm
Node

Clone the repo

# Clone the repo with git clone command
$ git clone https://github.com/cn-2k/nottia.git
# Go to project folder
$ cd nottia

Install dependencies and start the dev server

# Inside the project folder, install the necessary dependencies with npm install
$ npm install
# Start the server
$ npm run dev

After this the server will be avaiable on: localhost:3000

Nottia Worker:

Note and image generator

This repo is the worker for Nottia challenge app, combines two AI models to generate notes or images based on user prompts, using Cloudflare Workers.

Check the Web App that use this worker: Nottia

Installation Instructions

PS: you dont need to make this steps if you just want to use the webapp since it’s used the worker link that was deployed on cloudflare network.

But if you want to run and see the worker:

Clone the repo

# Clone the repo with git clone command
$ git clone https://github.com/cn-2k/nottia-worker.git
# Go to project folder
$ cd nottia-worker

Run the worker on dev mode

# Install Wrangler
$ npm install wrangler –save-dev
# Install project dependencies
$ npm install
# Go to project folder and run the dev command
$ wrangler dev

Now see the output in terminal and check where the worker is running.

Usage

If…

Journey

Initially this app was focused on register notes manually, with this challenge I saw the oportunitty for delve deeper into AI, Serverless Workers, and the entire Cloudflare platform. Integrating these models was a significant challenge for me, but in the end, they performed as expected.

Now I see space for integrate AI on any app, Cloudflare is amazing!

Multiple Models and/or Triple Task Types

The app use two AI Workers models from Cloudflare to generate text (@cf/meta/llama-2-7b-chat-fp16) and generate images (@cf/stabilityai/stable-diffusion-xl-base-1.0).

Leave a Reply

Your email address will not be published. Required fields are marked *