Skip to content

Commit

Permalink
added mistral
Browse files Browse the repository at this point in the history
  • Loading branch information
Nutlope committed Dec 19, 2023
1 parent 3d805f6 commit 2704f16
Show file tree
Hide file tree
Showing 15 changed files with 182 additions and 57 deletions.
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
TOGETHER_API_KEY=
OPENAI_API_KEY=
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ This project generates Twitter (X) bios for you using AI.

## How it works

This project uses the [ChatGPT API](https://openai.com/api/) and [Vercel Edge functions](https://vercel.com/features/edge-functions) with streaming. It constructs a prompt based on the form and user input, sends it to the chatGPT API via a Vercel Edge function, then streams the response back to the application.
This project uses both [Mixtral]() and [GPT-3.5](https://openai.com/api/) with streaming through a [Vercel Edge functions](https://vercel.com/features/edge-functions). It constructs a prompt based on the form and user input, sends it either to the Mixtral API through Together.ai or the GPT-3.5 API through OpenAI, then streams the response back to the application.

If you'd like to see how I built this, check out the [video](https://youtu.be/JcE-1xzQTE0) or [blog post](https://vercel.com/blog/gpt-3-app-next-js-vercel-edge-functions).
If you'd like to see how I built a previous version of this, check out the [video](https://youtu.be/JcE-1xzQTE0) or [blog post](https://vercel.com/blog/gpt-3-app-next-js-vercel-edge-functions).

## Running Locally

After cloning the repo, go to [OpenAI](https://beta.openai.com/account/api-keys) to make an account and put your API key in a file called `.env`.
After cloning the repo, go to [OpenAI](https://beta.openai.com/account/api-keys) to make an account and put your API key in a file called `.env`. Then create an account at Together.ai and add that API key in as well to run the Mixtral model. See the `.example.env` for the environment variables needed.

Then, run the application in the command line and it will be available at `http://localhost:3000`.

Expand All @@ -24,4 +24,8 @@ npm run dev

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Nutlope/twitterbio&env=OPENAI_API_KEY&project-name=twitter-bio-generator&repo-name=twitterbio)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Nutlope/twitterbio&env=OPENAI_API_KEY,TOGETHER_API_KEY&project-name=twitter-bio-generator&repo-name=twitterbio)

## Future tasks

- [ ] Add more AI models via a dropdown
8 changes: 4 additions & 4 deletions components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ export default function Footer() {
<div>
Powered by{' '}
<a
href="https://openai.com/blog/chatgpt"
href="https://mistral.ai/news/mixtral-of-experts"
target="_blank"
rel="noreferrer"
className="font-bold hover:underline transition underline-offset-2"
>
ChatGPT{' '}
Mixtral{' '}
</a>
and{' '}
<a
href="https://vercel.com/"
href="https://platform.openai.com/docs/models"
target="_blank"
rel="noreferrer"
className="font-bold hover:underline transition underline-offset-2"
>
Vercel Edge Functions.
GPT-3.5
</a>
</div>
<div className="flex space-x-4 pb-4 sm:pb-0">
Expand Down
26 changes: 10 additions & 16 deletions components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
import Image from 'next/image';
import Link from 'next/link';
import Github from './GitHub';

export default function Header() {
return (
<header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
<Link href="/" className="flex space-x-3">
<Image
<img
alt="header text"
src="/writingIcon.png"
className="sm:w-12 sm:h-12 w-8 h-8"
width={32}
height={32}
src="/write.svg"
className="sm:w-9 sm:h-9 w-8 h-8"
/>
<h1 className="sm:text-4xl text-2xl font-bold ml-2 tracking-tight">
<h1 className="sm:text-3xl text-2xl font-bold ml-2 tracking-tight">
twitterbio.io
</h1>
</Link>
<a
href="https://vercel.com/templates/next.js/twitter-bio"
className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-600 shadow-md transition-colors hover:bg-gray-100"
href="https://github.com/Nutlope/twitterbio"
target="_blank"
rel="noreferrer"
rel="noopener noreferrer"
>
<Image
alt="Vercel Icon"
src="/vercelLogo.png"
className="sm:w-8 sm:h-[27px] w-8 h-[28px]"
width={32}
height={28}
/>
<Github />
<p>Star on GitHub</p>
</a>
</header>
);
Expand Down
65 changes: 65 additions & 0 deletions components/Toggle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Switch } from '@headlessui/react';
import Image from 'next/image';

function classNames(...classes: any) {
return classes.filter(Boolean).join(' ');
}

export default function Toggle({ isGPT, setIsGPT }: any) {
return (
<Switch.Group as="div" className="flex items-center">
<Switch.Label
as="span"
className="mr-3 text-sm flex justify-center gap-2 items-center"
>
<Image
src="/mistral-logo.jpeg"
width={25}
height={25}
alt="1 icon"
className={`${isGPT && 'opacity-50'}`}
/>
<span
className={`font-medium ${isGPT ? 'text-gray-400' : 'text-gray-900'}`}
>
Mixtral
</span>{' '}
</Switch.Label>
<Switch
checked={isGPT}
onChange={setIsGPT}
className={classNames(
isGPT ? 'bg-black' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2'
)}
>
<span
aria-hidden="true"
className={classNames(
isGPT ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
)}
/>
</Switch>
<Switch.Label
as="span"
className="ml-3 text-sm flex justify-center gap-2 items-center"
>
<span
className={`font-medium ${
!isGPT ? 'text-gray-400' : 'text-gray-900'
}`}
>
GPT-3.5
</span>{' '}
<Image
src="/openai-logo.jpeg"
width={30}
height={30}
alt="OpenAI logo"
className={`${!isGPT && 'opacity-50'}`}
/>
</Switch.Label>
</Switch.Group>
);
}
10 changes: 8 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"start": "next start"
},
"dependencies": {
"@headlessui/react": "^1.7.7",
"@headlessui/react": "^1.7.17",
"@headlessui/tailwindcss": "^0.1.2",
"@heroicons/react": "^2.0.13",
"@tailwindcss/forms": "^0.5.3",
Expand All @@ -17,7 +17,8 @@
"react-dom": "18.2.0",
"react-hook-form": "^7.42.0",
"react-hot-toast": "^2.4.0",
"react-use-measure": "^2.1.1"
"react-use-measure": "^2.1.1",
"together-ai": "^0.5.2"
},
"devDependencies": {
"@types/node": "18.11.3",
Expand Down
40 changes: 40 additions & 0 deletions pages/api/mistral.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Together from 'together-ai';

if (!process.env.TOGETHER_API_KEY) {
throw new Error('Missing env var from Together.ai');
}

export const config = {
runtime: 'edge',
};

const together = new Together({
auth: process.env.TOGETHER_API_KEY,
});

const handler = async (req: Request): Promise<Response> => {
const { prompt } = (await req.json()) as {
prompt?: string;
};

if (!prompt) {
return new Response('No prompt in the request', { status: 400 });
}

const stream = await together.inference(
'mistralai/Mixtral-8x7B-Instruct-v0.1',
{
prompt: prompt,
max_tokens: 300,
stream_tokens: true,
}
);

return new Response(stream as ReadableStream, {
headers: new Headers({
'Cache-Control': 'no-cache',
}),
});
};

export default handler;
File renamed without changes.
Loading

0 comments on commit 2704f16

Please sign in to comment.