From e23da7a57992293f94ddfb44aec6ce6eded523ef Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Thu, 26 Sep 2024 09:28:18 +0200
Subject: [PATCH] voice recognition trial 2

---
 app/backend/voice_backend.ts     |  2 +-
 app/components/InputFrontend.tsx |  7 ++++++-
 app/styles/input.css             | 16 ++++++++++++++++
 app/styles/variables.css         |  1 +
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/backend/voice_backend.ts b/app/backend/voice_backend.ts
index f809a5c..f5cc97f 100644
--- a/app/backend/voice_backend.ts
+++ b/app/backend/voice_backend.ts
@@ -4,7 +4,7 @@ class VoiceSend {
     sendToVoiceRecognition(audio_data: Blob) {
         console.log("sending recording...");
         
-        const dataSend = { audio_data }
+        const dataSend = { audio:audio_data, option:"offline", recognition_type: "basic" }
         axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", dataSend)
             .then((response: any) => {
                 console.log(response['response'])
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx
index ce8ac49..c84124b 100644
--- a/app/components/InputFrontend.tsx
+++ b/app/components/InputFrontend.tsx
@@ -1,4 +1,5 @@
 import React, { useState, ForwardedRef, useEffect } from 'react';
+import "../styles/variables.css"
 
 interface InputProps {
   message: string;
@@ -30,6 +31,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
       }
     };
 
+    const styles = {
+      
+    }
+
     return (
       <div className="input" id="inputForm" ref={ref}>
         <input
@@ -43,7 +48,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
         <button type="button" onClick={() => onSendClick(inputValue, false)} disabled={inputDisabled ? true : false}>
           <img src="/img/send.svg" alt="send" />
         </button>
-        <button type="button" onClick={onMicClick} style={{backgroundColor: isRecording? "red" : "green"}}>
+        <button className={`microphone-button ${isRecording ? "red":"green"}`} type="button" onClick={onMicClick}>
           <img src="/img/microphone.svg" alt="microphone" />
         </button>
       </div>
diff --git a/app/styles/input.css b/app/styles/input.css
index ceeb0b3..ffbffeb 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -59,3 +59,19 @@
     background-color: var(--input-button-hover-color);
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
+
+.microphone-button.red{
+    background-color: var(--close-button-color);
+}
+
+.microphone-button.green{
+    background-color: var(--button-background-color);
+}
+
+.microphone-button.red:hover{
+    background-color: var(--close-button-hover-color);
+}
+
+.microphone-button.green:hover{
+    background-color: var(--input-button-hover-color);
+}
\ No newline at end of file
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 72c464a..795b4fc 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -19,6 +19,7 @@
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
+    --close-button-hover-color: #9e0101; /*NEW*/
     --burger-menu-background-color: #79832e;  /*NEW*/
     --overlay-text-color:white; /*NEW*/