first commit

ElonMusk2002 · Jul 28, 2023 · 6a46d48 · 6a46d48
commit 6a46d48
Show file tree

Hide file tree

Showing 16 changed files with 5,573 additions and 0 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -0,0 +1 @@
+HUGGINGFACE_API_KEY=xxxxxxx
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
@@ -0,0 +1,80 @@
+<div align="center">
+  <h1>🚀Hugging Face Chatbot🤖</h1>
+
+  <p>
+    <a href="https://github.com/ElonMusk2002/chat-huggingface/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/ElonMusk2002/chat-huggingface?style=for-the-badge&logo=github"></a>
+    <a href="https://github.com/ElonMusk2002/chat-huggingface/network"><img alt="GitHub forks" src="https://img.shields.io/github/forks/ElonMusk2002/chat-huggingface?style=for-the-badge&logo=github"></a>
+    <a href="https://github.com/ElonMusk2002/chat-huggingface/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/ElonMusk2002/chat-huggingface?style=for-the-badge&logo=github"></a>
+   </p>
+
+
+  <p>This project is a template for building a chatbot using TypeScript and Next.js, powered by the Hugging Face API. With this template, you can quickly set up a chatbot that uses the Open Assistant SFT-4 12B model to answer various questions and engage in conversations on different topics.</p>
+  <div align="center">
+  <img src="screenshot1.png" alt="Screenshot of the Chatbot" />
+</div>
+<br />
+<div align="center">
+  <img src="screenshot2.png" alt="Screenshot of the Chatbot" />
+</div>
+</div>
+
+<div align="center"
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=ai-sdk-example):
+
+[![Deploy with Vercel](https://img.shields.io/badge/-Deploy%20with%20Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FElonMusk2002%2Fchat-huggingface&env=HUGGINGFACE_API_KEY&envDescription=Hugging%20Face%20User%20Access%20Token&envLink=https%3A%2F%2Fhuggingface.co%2Fsettings%2Ftokens&project-name=chat-huggingface&repository-name=chat-huggingface)
+
+## Example Chatbot using Hugging Face and Next.js
+
+Welcome to a simple chatbot application using Hugging Face and Next.js. This application provides a basic user interface for users to interact with the Open Assistant SFT-4 12B model. With just a few clicks you can chat with a fine-tuned English language model designed for conversation.
+
+Here are some key features of the application:
+- 🤖 Easy-to-use chat interface
+- 🚀 Quick and responsive
+- 🤪 Fun to chat with!
+
+## About Hugging Face
+
+[Hugging Face](https://huggingface.co) is a company that develops tools for building applications using machine learning. It is most notable for its 🤖 [Transformers](https://huggingface.co/docs/transformers/index) Python library built for natural language processing applications and its platform that allows users to share machine learning models and datasets.
+
+## About Open Assistant
+
+The model in the example is [Open Assistant SFT-4 12B](https://huggingface.co/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5). This is the 4th iteration English supervised-fine-tuning (SFT) model of the Open-Assistant project. It is based on a Pythia 12B that was fine-tuned on human demonstrations of assistant conversations collected through the [Open Assistant](https://open-assistant.io/) human feedback web app before March 25, 2023. 
+
+## Deploy your own
+To run the example locally you need to:
+
+1. Sign up at [Hugging Face](https://huggingface.co/join).
+2. Go to your [Hugging Face account settings](https://huggingface.co/settings/tokens). Create a User Access Token with `write` access.
+3. Set the required Hugging Face environment variable with the token as shown [the example env file](./.env.local.example) but in a new file called `.env.local`.
+4. Clone the repository, `git clone https://github.com/ElonMusk2002/chat-huggingface.git`
+5. Install the required dependencies with `npm install`
+6. Launch the development server with `npm dev`
+
+## 🛠️ Built With
+
+### Tech Stack
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
+
+### Tools Used
+
+[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)](https://git-scm.com/)
+[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/)
+[![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white)](https://code.visualstudio.com/)
+[![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/)
+
+## 🤝 Contributing
+
+If you want to contribute to this project, feel free to open a [pull request](https://github.com/ElonMusk2002/chat-huggingface/pulls) or an [issue](https://github.com/ElonMusk2002/chat-huggingface/issues) on GitHub. Before submitting any changes, please make sure you follow these guidelines:
+
+- Check if someone else has already reported the same issue or suggested the same improvement.
+- Create a new branch for your changes and use descriptive branch names.
+- Write clear commit messages and add comments to your code.
+- Make sure your changes are properly tested.
+- Update the documentation if necessary.
+
+Thank you for your contributions! 
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
@@ -0,0 +1,33 @@
+import { HfInference } from '@huggingface/inference'
+import { HuggingFaceStream, StreamingTextResponse } from 'ai'
+import { experimental_buildOpenAssistantPrompt } from 'ai/prompts'
+
+// Create a new HuggingFace Inference instance
+const Hf = new HfInference(process.env.HUGGINGFACE_API_KEY)
+
+// IMPORTANT! Set the runtime to edge
+export const runtime = 'edge'
+
+export async function POST(req: Request) {
+  // Extract the `messages` from the body of the request
+  const { messages } = await req.json()
+
+  const response = Hf.textGenerationStream({
+    model: 'OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5',
+    inputs: experimental_buildOpenAssistantPrompt(messages),
+    parameters: {
+      max_new_tokens: 200,
+      // @ts-ignore (this is a valid parameter specifically in OpenAssistant models)
+      typical_p: 0.2,
+      repetition_penalty: 1,
+      truncate: 1000,
+      return_full_text: false
+    }
+  })
+
+  // Convert the response into a friendly text-stream
+  const stream = HuggingFaceStream(response)
+
+  // Respond with the stream
+  return new StreamingTextResponse(stream)
+}
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,23 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Hugging Face ChatBot',
+  description: 'Generated by create next app'
+}
+
+export default function RootLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} bg-gray-900 text-white`}>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import { useChat } from 'ai/react'
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat()
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gradient-to-b from-gray-800 to-gray-900 text-white">
+    {/* Header */}
+    <div className="flex items-center px-4 py-3 bg-opacity-80 backdrop-blur-lg">
+      <div className="w-full flex items-center justify-between">
+        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-white truncate flex items-center">
+          Chat Hugging Face UI
+        </h2>
+        <a
+          href="https://github.com/ElonMusk2002/chat-huggingface"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-8 h-8 md:w-10 md:h-10 ml-2 fill-current text-dark-400 hover:text-gray-500"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 0C4.475 0 0 4.475 0 10c0 4.411 2.865 8.141 6.839 9.458.5.092.682-.213.682-.474 0-.233-.009-.853-.014-1.674-2.782.604-3.37-1.338-3.37-1.338-.455-1.177-1.11-1.492-1.11-1.492-.908-.619.07-.607.07-.607 1.004.07 1.531 1.031 1.531 1.031.892 1.525 2.34 1.084 2.912.829.091-.646.349-1.085.634-1.334-2.22-.251-4.555-1.107-4.555-4.936 0-1.09.39-1.984 1.032-2.682-.104-.252-.448-1.269.098-2.642 0 0 .84-.268 2.75 1.024a9.527 9.527 0 012.475-.333 9.568 9.568 0 012.475.333c1.91-1.292 2.748-1.024 2.748-1.024.546 1.373.202 2.39.098 2.641.642.698 1.032 1.592 1.032 2.682 0 3.837-2.337 4.683-4.563 4.928.358.309.678.917.678 1.847 0 1.334-.012 2.408-.012 2.727 0 .263.18.567.688.473C17.138 18.141 20 14.412 20 10c0-5.525-4.475-10-10-10z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </a>
+      </div>
+    </div>
+
+    {/* Chat Messages */}
+    <div className="flex-1 p-4 md:p-8 overflow-y-auto">
+      <div className="flex flex-col space-y-4">
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`p-4 rounded-lg ${
+                m.role === 'user'
+                  ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-right w-40 lg:w-2/5'
+                  : 'bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-amber-200 via-violet-600 to-sky-900 text-left w-40 lg:w-2/5'
+              }`}
+            >
+              <div className="rounded-lg">
+                <span className="font-medium">{m.role === 'user' ? 'You' : 'AI'}</span>: {m.content}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    {/* User Input */}
+    <form onSubmit={handleSubmit} className="flex items-center px-4 py-3 bg-gray-800">
+      <input
+        className="flex-1 px-4 py-2 text-white bg-gray-700 bg-opacity-60 border rounded-full placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
+        type="text"
+        placeholder="Say something..."
+        value={input}
+        onChange={handleInputChange}
+      />
+
+      <button
+        type="submit"
+        className="ml-4 p-2 text-blue-400 rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+          />
+        </svg>
+      </button>
+        {messages.length > 0 && (
+          <a
+            href="https://github.com/ElonMusk2002/chat-huggingface"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white ml-4 hover:text-gray-500"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 0C4.475 0 0 4.475 0 10c0 4.411 2.865 8.141 6.839 9.458.5.092.682-.213.682-.474 0-.233-.009-.853-.014-1.674-2.782.604-3.37-1.338-3.37-1.338-.455-1.177-1.11-1.492-1.11-1.492-.908-.619.07-.607.07-.607 1.004.07 1.531 1.031 1.531 1.031.892 1.525 2.34 1.084 2.912.829.091-.646.349-1.085.634-1.334-2.22-.251-4.555-1.107-4.555-4.936 0-1.09.39-1.984 1.032-2.682-.104-.252-.448-1.269.098-2.642 0 0 .84-.268 2.75 1.024a9.527 9.527 0 012.475-.333 9.568 9.568 0 012.475.333c1.91-1.292 2.748-1.024 2.748-1.024.546 1.373.202 2.39.098 2.641.642.698 1.032 1.592 1.032 2.682 0 3.837-2.337 4.683-4.563 4.928.358.309.678.917.678 1.847 0 1.334-.012 2.408-.012 2.727 0 .263.18.567.688.473C17.138 18.141 20 14.412 20 10c0-5.525-4.475-10-10-10z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </a>
+        )}
+      </form>
+    </div>
+  )
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig