Feature/api server (#18)

* chore: loosen python version * docs: update README * feat: add vectortore example. * feat: add API_SERVER_* env variables * fix: useRef not working * fix: use NEXT_PUBLIC
coreators · Jun 10, 2023 · d494cf8 · d494cf8
1 parent c31865d
commit d494cf8
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 27 deletions.
diff --git a/apps/api/README.md b/apps/api/README.md
@@ -48,8 +48,20 @@ poetry add <package-name>
 
 
 ### Env variable
+
+mac
 ```
 brew install direnv
+
+```
+
+ubuntu
+```
+$ apt install direnv
+$ vim ~/.bashrc
+
+add eval "$(direnv hook bash)"
+
 ```
 
 

diff --git a/apps/api/vectorstore.example b/apps/api/vectorstore.example
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -1,9 +1,21 @@
-############## ENV EXAMPLE #############
+################################################################################
+### GENERAL SETTINGS
+################################################################################
 
-############## SUPABASE ################
-NEXT_PUBLIC_SUPABASE_URL="https://efdnnygaricwqyzlnthc.supabase.co"
+# API_SERVER
+API_SERVER_URL="http://localhost:9000"
+API_SERVER_WEB_SOCKET="ws://localhost:9000"
+
+################################################################################
+### SUPABASE
+################################################################################
+
+NEXT_PUBLIC_SUPABASE_URL=""
 NEXT_PUBLIC_SUPABASE_ANON_KEY=""
 SUPABASE_SERVICE_ROLE_KEY=""
 
-############## OPENAI ##################
+################################################################################
+### OPENAI
+################################################################################
+
 OPENAI_API_KEY=""
diff --git a/apps/web/src/components/CurveAnimation.tsx b/apps/web/src/components/CurveAnimation.tsx
@@ -44,13 +44,13 @@ const CurveAnimation = forwardRef((props, ref) => {
   let animatestep = useRef(0);
   let toEndRef = useRef(false);
   let isListenRef = useRef(false);
-  let isProcessRef = useRef(false);
+  let isRunningRef = useRef(false);
 
   const canvasRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
     listen: listen,
-    process: process,
+    run: run,
     finish: finish,
     end: end,
   }));
@@ -135,7 +135,7 @@ const CurveAnimation = forwardRef((props, ref) => {
         )
       );
       if (isListenRef.current) animatestep.current = 40;
-      if (isProcessRef.current) animatestep.current = 60;
+      if (isRunningRef.current) animatestep.current = 60;
       acceleration.current = easing(animatestep.current, 0, 1, 240);
 
       if (acceleration.current > 0.35) {
@@ -164,19 +164,19 @@ const CurveAnimation = forwardRef((props, ref) => {
   const listen = () => {
     toEndRef.current = true;
     isListenRef.current = true;
-    isProcessRef.current = false;
+    isRunningRef.current = false;
   };
 
-  const process = () => {
+  const run = () => {
     toEndRef.current = true;
     isListenRef.current = false;
-    isProcessRef.current = true;
+    isRunningRef.current = true;
   };
 
   const finish = () => {
     toEndRef.current = true;
     isListenRef.current = false;
-    isProcessRef.current = false;
+    isRunningRef.current = false;
   };
 
   const end = () => {

diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
@@ -7,23 +7,24 @@ import axios from "axios";
 
 export default function Home() {
   const [ws, setWs] = useState<WebSocket>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
   const audioRef = useRef(null);
 
 
   const onTranscribe = async (blob: Blob) => {
     if (childRef.current) {
-      childRef.current.process();
+      childRef.current.run();
     }
-    setIsProcessing(true);
+    setIsRunning(true);
     const formdata = new FormData();
     const file = new File([blob], "speech.mp3", {
       type: "audio/mpeg",
     });
     formdata.append("audioData", file, "speech.mp3");
     formdata.append("model", "whisper-1");
 
-    const url = "http://localhost:9000/transcriptions";
+    const url = `${process.env.NEXT_PUBLIC_API_SERVER_URL}/transcriptions`;
+    console.log("url", url)
     const response = await axios.post(url, formdata, {
       headers: { "Content-Type": "multipart/form-data" },
     });
@@ -62,7 +63,7 @@ export default function Home() {
 
   const childRef = useRef({
     listen: () => {},
-    process: () => {},
+    run: () => {},
     finish: () => {},
     end: () => {},
   });
@@ -78,14 +79,14 @@ export default function Home() {
     // start listen animation (breathing)
   };
 
-  const process = async () => {
+  const run = async () => {
     // start processing animation (fast spin)
     stopRecording();
     // -> onTranscribe
   };
 
   useEffect(() => {
-    const endpoint = "ws://localhost:9000/chat";
+    const endpoint = `${process.env.NEXT_PUBLIC_API_SERVER_WEB_SOCKET}/chat`;
     const ws = new WebSocket(endpoint);
 
     ws.onmessage = async function (event) {
@@ -115,7 +116,7 @@ export default function Home() {
           if (enableTTS) {
             const formdata = new FormData();
             formdata.append("text", finalText);
-            const url = "http://localhost:9000/tts";
+            const url = `${process.env.NEXT_PUBLIC_API_SERVER_URL}/tts`;
             const response = await axios.post(url, formdata, {
               headers: { "Content-Type": "multipart/form-data" },
               responseType: "blob",
@@ -131,9 +132,9 @@ export default function Home() {
             console.log("end");
             childRef.current.end();
           }
-          setIsProcessing(false);
+          setIsRunning(false);
         } else if (data.type === "error") {
-          setIsProcessing(false);
+          setIsRunning(false);
           const p = messages.lastChild.lastChild as HTMLParagraphElement;
           p.innerHTML += data.message;
         }
@@ -174,8 +175,8 @@ export default function Home() {
       className="flex min-h-screen flex-col items-center justify-center py-2 "
       onMouseDown={() => listen()}
       onTouchStart={() => listen()}
-      onMouseUp={() => process()}
-      onTouchEnd={() => process()}
+      onMouseUp={() => run()}
+      onTouchEnd={() => run()}
     >
       <Head>
         <title>JANOT</title>

diff --git a/apps/web/src/pages/test.tsx b/apps/web/src/pages/test.tsx
@@ -19,7 +19,7 @@ export default function TestPage() {
     formdata.append("audioData", file, "speech.mp3");
     formdata.append("model", "whisper-1");
 
-    const url = "http://localhost:9000/transcriptions";
+    const url = `${process.env.API_SERVER_URL}/transcriptions`;
     const response = await axios.post(url, formdata, {
       headers: { "Content-Type": "multipart/form-data" },
     });
@@ -39,7 +39,7 @@ export default function TestPage() {
     formdata.append("audioData", file, "speech.mp3");
     formdata.append("model", "whisper-1");
 
-    const url = "http://localhost:9000/transcriptions";
+    const url = `${process.env.API_SERVER_URL}/transcriptions`;
     const response = await axios.post(url, formdata, {
       headers: { "Content-Type": "multipart/form-data" },
     });
@@ -71,7 +71,7 @@ export default function TestPage() {
 
 
   useEffect(() => {
-    const endpoint = "ws://localhost:9000/chat";
+    const endpoint = `${process.env.API_SERVER_WEB_SOCKET}/chat`;
     const ws = new WebSocket(endpoint);
 
     ws.onmessage = function (event) {

diff --git a/turbo.json b/turbo.json
@@ -9,7 +9,9 @@
         "NEXT_PUBLIC_SUPABASE_URL",
         "NEXT_PUBLIC_SUPABASE_ANON_KEY",
         "SUPABASE_SERVICE_ROLE_KEY",
-        "OPENAI_API_KEY"
+        "OPENAI_API_KEY",
+        "API_SERVER_URL",
+        "API_SERVER_WEB_SOCKET"
       ]
     },
     "lint": {},