Merge pull request #106 from Gaurang-1402/main

SpeechGPT project completion

tree/main/extensions/speechgpt/.gitignore

@@ -0,0 +1,38 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+serviceAccountKey.json

tree/main/extensions/speechgpt/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

tree/main/extensions/speechgpt/README.md

@@ -0,0 +1,90 @@
+## Description 
+
+SpeechGPT is a voice-based chat application that enables interaction with powerful large language models. SpeechGPT offers an improved user interface for specific types of queries, allowing users to leverage multiple models from OpenAI, including Ada, Babbage, and GPT-4. Within the context of LabGraph, SpeechGPT is expected to serve as an interface for internal experiments conducted at Meta Reality Labs.
+
+SpeechGPT offers all the features of other chat-based AI application and allows the user to use voice via Speech-to-text to interface with OpenAI models.  
+
+Figma design Mockup of the application: https://www.figma.com/file/TCRbyQtfImnXFtnUWqD1dw/SpeechGPT-main?type=design&node-id=1%3A19&t=S3UEHKEKJcURzWKn-1
+
+Project deployed: https://speechgpt-labgraph.vercel.app/
+
+The following project tackles issues #99, #100, #101 and #102. We have set up the SpeechGPT UI with authentication, New chat, delete chat, and chat history functionalities. We have also created the styling theme for this project including the colors, fonts, and common styles using Tailwind CSS. We are using Firebase Firestore as our database and Google authentication.
+
+This is part of a larger project aiming to integrate speech recognition using microphone with chatGPT.
+
+Dependencies
+
+You will have to create a .env.local in the root folder of /tree/main/extensions/speechgpt with the following API keys and credentials:
+
+```
+// FACEBOOK
+FACEBOOK_APP_ID=...
+FACEBOOK_APP_SECRET=...
+
+// NEXTAUTH
+NEXTAUTH_URL=...
+NEXTAUTH_SECRET=...
+
+// OPENAI
+OPENAI_API_KEY =...
+
+// GOOGLE
+GOOGLE_APP_ID=...
+GOOGLE_APP_SECRET=...
+
+
+// FIREBASE
+FIREBASE_API_KEY=...
+FIREBASE_AUTH_DOMAIN=...
+FIREBASE_PROJECT_ID=...
+FIREBASE_STORAGE_BUCKET=...
+FIREBASE_MESSAGE_SENDER_ID=...
+FIREBASE_APP_ID=...
+FIREBASE_MEASUREMENT_ID=...
+FIREBASE_SERVICE_ACCOUNT_KEY= ...
+
+NEXT_PUBLIC_FIREBASE_API_KEY= ...
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= ...
+NEXT_PUBLIC_FIREBASE_PROJECT_ID= ...
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET= ...
+NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID= ...
+NEXT_PUBLIC_FIREBASE_APP_ID= ...
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID= ...
+NEXT_PUBLIC_FIREBASE_SERVICE_ACCOUNT_KEY= ...
+
+```
+
+Next, you will have to install all the dependencies for the UI project. This can be done by running ```npm i``` in the root folder of speechgpt. Here are the dependencies found in speechgpt/package.json
+
+```
+  "dependencies": {
+    "@heroicons/react": "^2.0.16",
+    "classnames": "^2.3.2",
+    "firebase-admin": "^11.5.0",
+    "heroicons": "^2.0.16",
+    "highlight.js": "^11.7.0",
+    "next": "latest",
+    "next-auth": "^4.19.2",
+    "openai": "^3.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.1.1",
+    "react-hot-toast": "^2.4.0",
+    "react-markdown": "^8.0.5",
+    "react-select": "^5.7.0",
+    "react-speech-recognition": "^3.10.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "swr": "^2.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.3",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "@types/react-speech-recognition": "^3.9.1",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.4",
+    "typescript": "4.9.4"
+  }
+```

tree/main/extensions/speechgpt/app/chat/[id]/page.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Chat from "../../../components/Chat";
+import ChatInput from "../../../components/ChatInput";
+
+type Props = {
+  params: {
+    id: string
+  };
+};
+
+function ChatPage({params: { id }}: Props){
+  return <div className="flex flex-col h-screen overflow-hidden">
+    <Chat chatId = { id } />
+    <ChatInput chatId = { id } />
+  </div>
+}
+
+export default ChatPage;

tree/main/extensions/speechgpt/app/head.tsx

@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title>SpeechGPT</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/logo_labgraph_icon.ico" />
+    </>
+  )
+}

tree/main/extensions/speechgpt/app/layout.tsx

@@ -0,0 +1,51 @@
+
+import SideBar from '../components/SideBar';
+import '../styles/globals.css';
+
+import SessionProvider from "../components/SessionProvider"
+import { getServerSession } from "next-auth"
+
+import { authOptions } from "../pages/api/auth/[...nextauth]"
+import Login from '../components/Login';
+import ClientProvider from '../components/ClientProvider';
+import SideBarLayout from '../components/SideBarLayout';
+
+import { useState } from 'react';
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+
+  const session = await getServerSession(authOptions)
+
+  // printed in server
+  // console.log(session);
+  return (
+    <html>
+
+      <head />
+      <body>
+        <SessionProvider session={session}>
+          {
+            !session ? (<Login></Login>) :
+              (
+                <div className="flex overflow-x-hidden ">
+                  <div className="">
+                    <SideBarLayout />
+                  </div>
+
+                  <ClientProvider />
+
+                  <div className="bg-[#ffff] flex-1">{children}</div>
+                </div>
+              )
+
+          }
+
+        </SessionProvider>
+      </body>
+    </html>
+  );
+}

tree/main/extensions/speechgpt/app/page.tsx

@@ -0,0 +1,53 @@
+
+import { BoltIcon, ExclamationTriangleIcon, SunIcon } from '@heroicons/react/24/outline'
+
+ function HomePage() {
+   return (
+
+     <div className=" flex flex-col items-center justify-center h-screen
+     px-2 text-white">
+      <h1 className="text-5xl font-bold mb-20 text-custom-gray">SpeechGPT</h1>
+
+      <div className="flex space-x-2 text-center">
+        <div>
+          <div className="flex flex-col items-center justify-center mb-5">
+            <SunIcon className="h-8 w-8 text-custom-blue" />
+            <h2>Examples</h2>
+          </div>
+
+          <div className="space-y-2">
+            <p className="infoText">"Explain Something to me"</p>
+            <p className="infoText">"What is the difference between a dog and a cat?"</p>
+            <p className="infoText">"What is the color of the sun?"</p>
+          </div>
+        </div>
+        <div>
+          <div className="flex flex-col items-center justify-center mb-5">
+            <BoltIcon className="h-8 w-8 text-custom-blue" />
+            <h2>Capabilities</h2>
+          </div>
+
+          <div className="space-y-2">
+            <p className="infoText">Change the SpeechGPT Model to use</p>
+            <p className="infoText">Messages are stored in Firebase's Firestore</p>
+            <p className="infoText">Hot Toast notifications when SpeechGPT is thinking!</p>
+          </div>
+        </div>
+        <div>
+          <div className="flex flex-col items-center justify-center mb-5">
+            <ExclamationTriangleIcon className="h-8 w-8 text-custom-blue" />
+            <h2>Limitations</h2>
+          </div>
+
+          <div className="space-y-2">
+            <p className="infoText">May occasionally generate incorrect information</p>
+            <p className="infoText">May ocassionally produce harmful instructions or biased content</p>
+            <p className="infoText">Limited knowledge of world and events after 2021</p>
+          </div>
+        </div>
+      </div>
+     </div>
+   )
+ }
+
+ export default HomePage;

tree/main/extensions/speechgpt/components/Chat.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useSession } from "next-auth/react";
+import { useCollection } from "react-firebase-hooks/firestore";
+import { collection, orderBy, query } from "firebase/firestore"
+import { db } from "../firebase"
+import Message from "./Message";
+import { ArrowDownCircleIcon } from "@heroicons/react/24/solid";
+
+type Props = {
+  chatId: string;
+};
+
+function Chat({ chatId }: Props) {
+
+  const { data: session } = useSession()
+
+  const [messages] = useCollection(session && query(collection(db, "users", session?.user?.email!, "chats", chatId, "messages"), orderBy("createdAt", "asc")))
+  return <div className="flex-1 overflow-x-hidden overflow-y-scroll-auto">
+
+    {messages?.empty && (
+      <>
+        <p className="mt-10 text-center text-custom-gray">
+          Type a prompt below to get started!
+        </p>
+        <ArrowDownCircleIcon className="w-10 h-10 mx-auto mt-5 text-custom-gray animate-bounce"></ArrowDownCircleIcon>
+      </>
+    )}
+    {messages?.docs.map((message) => {
+      return <Message messageId={message.id} chatId={chatId} message={message.data()} />
+    })}
+  </div>
+}
+
+export default Chat;