How to change ai workers in cloudflare llm app template

[ai]
binding = "AI"
model = "@cf/meta/llama-2-7b-chat-int8"  # Replace with the new model ID

[ai]
binding = "AI"
model = "@cf/meta/llama-2-7b-chat-int8"  # Replace with the new model ID

const answer = await env.AI.run("@cf/meta/llama-2-7b-chat-int8", {  // Replace with the new model ID
  messages: [{ role: "user", content: `What is the square root of 9?` }],
});

const answer = await env.AI.run("@cf/meta/llama-2-7b-chat-int8", {  // Replace with the new model ID
  messages: [{ role: "user", content: `What is the square root of 9?` }],
});

[ai]
binding = "AI"
model = "@cf/meta/llama-3-8b-instruct"

[ai]
binding = "AI"
model = "@cf/meta/llama-3-8b-instruct"

const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
  messages: [{ role: "user", content: `What is the square root of 9?` }],
});

const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
  messages: [{ role: "user", content: `What is the square root of 9?` }],
});

hello-ai/
src/
index.ts
data.json
...

hello-ai/
src/
index.ts
data.json
...

import data from './data.json';

export default {
  async fetch(request, env, ctx) {
    const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
      messages: [{ role: "user", content: `What is the square root of 9?` }],
    });
    // Use the data from the data.json file
    console.log(data);
    return new Response(JSON.stringify(answer));
  },
};

import data from './data.json';

export default {
  async fetch(request, env, ctx) {
    const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
      messages: [{ role: "user", content: `What is the square root of 9?` }],
    });
    // Use the data from the data.json file
    console.log(data);
    return new Response(JSON.stringify(answer));
  },
};

// Client-side code
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

fetch('https://your-worker-url.com/upload', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

// Client-side code
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

fetch('https://your-worker-url.com/upload', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

// Server-side code (in index.ts)
export default {
  async fetch(request, env, ctx) {
    if (request.method === 'POST') {
      const formData = await request.formData();
      const file = formData.get('file');

      // Process the uploaded file
      const fileBuffer = await file.arrayBuffer();
      const fileText = await file.text();

      // Use the file contents with the LLM model
      const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
        messages: [{ role: "user", content: fileText }],
      });

      return new Response(JSON.stringify(answer));
    }
  },
};

// Server-side code (in index.ts)
export default {
  async fetch(request, env, ctx) {
    if (request.method === 'POST') {
      const formData = await request.formData();
      const file = formData.get('file');

      // Process the uploaded file
      const fileBuffer = await file.arrayBuffer();
      const fileText = await file.text();

      // Use the file contents with the LLM model
      const answer = await env.AI.run("@cf/meta/llama-3-8b-instruct", {
        messages: [{ role: "user", content: fileText }],
      });

      return new Response(JSON.stringify(answer));
    }
  },
};

curl -X POST \
  https://your-worker-url.com/generate-text \
  -H 'Content-Type: application/json' \
  -d '{"prompt": "Write a short story about a cat."}'

curl -X POST \
  https://your-worker-url.com/generate-text \
  -H 'Content-Type: application/json' \
  -d '{"prompt": "Write a short story about a cat."}'

import cloudflare

worker = cloudflare.Worker("your-worker-url.com")
response = worker.generate_text({"prompt": "Write a short story about a cat."})
print(response.text)

import cloudflare

worker = cloudflare.Worker("your-worker-url.com")
response = worker.generate_text({"prompt": "Write a short story about a cat."})
print(response.text)

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL('https://project.aroai.workers.dev/');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    const responseData = await response.json();
    return new Response(JSON.stringify(responseData), {
      headers: {
        'Content-Type': 'application/json',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL('https://project.aroai.workers.dev/');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    const responseData = await response.json();
    return new Response(JSON.stringify(responseData), {
      headers: {
        'Content-Type': 'application/json',
      },
    });
  },
};

wrangler generate my-worker

wrangler generate my-worker

wrangler publish my-worker

wrangler publish my-worker

npm install -g @cloudflare/wrangler

npm install -g @cloudflare/wrangler

import axios from 'axios';

const workerDevUrl = 'https://your-worker-dev-url.workers.dev';

const apiRoute = async (req, res) => {
  const prompt = req.body.prompt;
  const response = await axios.post(workerDevUrl, {
    prompt,
  });
  const result = response.data;
  res.json(result);
};

export default apiRoute;

import axios from 'axios';

const workerDevUrl = 'https://your-worker-dev-url.workers.dev';

const apiRoute = async (req, res) => {
  const prompt = req.body.prompt;
  const response = await axios.post(workerDevUrl, {
    prompt,
  });
  const result = response.data;
  res.json(result);
};

export default apiRoute;

import axios from 'axios';

const HomePage = () => {
  const [result, setResult] = useState(null);

  const handlePrompt = async (prompt) => {
    const response = await axios.post('/api/worker-dev', {
      prompt,
    });
    const result = response.data;
    setResult(result);
  };

  return (
    <div>
      <input type="text" onChange={(e) => handlePrompt(e.target.value)} />
      {result && <div>Result: {result}</div>}
    </div>
  );
};

export default HomePage;

import axios from 'axios';

const HomePage = () => {
  const [result, setResult] = useState(null);

  const handlePrompt = async (prompt) => {
    const response = await axios.post('/api/worker-dev', {
      prompt,
    });
    const result = response.data;
    setResult(result);
  };

  return (
    <div>
      <input type="text" onChange={(e) => handlePrompt(e.target.value)} />
      {result && <div>Result: {result}</div>}
    </div>
  );
};

export default HomePage;

const workerDevUrl = 'https://your-worker-dev-url.workers.dev';

const apiRoute = async (req, res) => {
  const prompt = req.body.prompt;
  const response = await fetch(workerDevUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ prompt }),
  });
  const result = await response.json();
  res.json(result);
};

const workerDevUrl = 'https://your-worker-dev-url.workers.dev';

const apiRoute = async (req, res) => {
  const prompt = req.body.prompt;
  const response = await fetch(workerDevUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ prompt }),
  });
  const result = await response.json();
  res.json(result);
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
      stream: true, // Enable streaming
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value);
      console.log(chunk); // Process the chunk
    }

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
      stream: true, // Enable streaming
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value);
      console.log(chunk); // Process the chunk
    }

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const eventSource = new EventSource(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    eventSource.onmessage = (event) => {
      console.log(event.data); // Process the message
    };

    eventSource.onerror = (event) => {
      console.error(event); // Handle errors
    };

    eventSource.onopen = () => {
      console.log('Streaming connection established');
    };

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const eventSource = new EventSource(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    eventSource.onmessage = (event) => {
      console.log(event.data); // Process the message
    };

    eventSource.onerror = (event) => {
      console.error(event); // Handle errors
    };

    eventSource.onopen = () => {
      console.log('Streaming connection established');
    };

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
      stream: true, // Enable streaming
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value);
      console.log(chunk); // Process the chunk
    }

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
      stream: true, // Enable streaming
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const chunk = decoder.decode(value);
      console.log(chunk); // Process the chunk
    }

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

[workers]
  account_id = "your_account_id"
  zone_id = "your_zone_id"
  name = "your_worker_name"
  script = "worker.js"
  stream = true

[workers]
  account_id = "your_account_id"
  zone_id = "your_zone_id"
  name = "your_worker_name"
  script = "worker.js"
  stream = true

{
  "name": "your-worker-name",
  "version": "1.0.0",
  "dependencies": {
    "@cloudflare/workers": "^1.0.0"
  }
}

{
  "name": "your-worker-name",
  "version": "1.0.0",
  "dependencies": {
    "@cloudflare/workers": "^1.0.0"
  }
}

git add .
git commit -m "Update code for streaming real-time response"
git push origin main

git add .
git commit -m "Update code for streaming real-time response"
git push origin main

wrangler publish

wrangler publish

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const eventSource = new EventSource(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    eventSource.onmessage = (event) => {
      console.log(event.data); // Process the message
    };

    eventSource.onerror = (event) => {
      console.error(event); // Handle errors
    };

    eventSource.onopen = () => {
      console.log('Streaming connection established');
    };

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};

import { Worker } from '@cloudflare/workers';

export default {
  async fetch(request, env, ctx) {
    const url = new URL('https://your-llm-template-url.workers.dev');
    const eventSource = new EventSource(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: 'Write a short story about a cat.',
      }),
    });

    eventSource.onmessage = (event) => {
      console.log(event.data); // Process the message
    };

    eventSource.onerror = (event) => {
      console.error(event); // Handle errors
    };

    eventSource.onopen = () => {
      console.log('Streaming connection established');
    };

    return new Response('Streaming response', {
      headers: {
        'Content-Type': 'text/plain',
      },
    });
  },
};