.gitignore

@@ -43,3 +43,5 @@ __pycache__/
 key.pem
 cert.pem
 api_key.txt
+
+database.json

app/backend/InputOutputHandler.tsx

@@ -9,7 +9,6 @@ import { resolve } from "path";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
-
 const InputOutputBackend: React.FC = () => {
   // # variables
   type Message = {
@@ -47,9 +46,9 @@ const InputOutputBackend: React.FC = () => {
             You will only answer in the language (you will receive the country code) ${preferredLanguage}. 
             But in the case the user specifically states to answer in another language, do that. Speaking in 
             another language is not stating you should answer in that language. 
-            Additionally, under no circumstances translate your answer into multiple languages.`,
+            Additionally, under no circumstances ever translate your answer into multiple languages.`,
         },
-        { role: "assistant", content: "Hello! How can I help you?" },
+        { role: "assistant", content: "Hello! How may I help you?" },
       ]); 
     }
   }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
@@ -174,7 +173,15 @@ const InputOutputBackend: React.FC = () => {
         if (postWorkerRef.current) {
           addMessage("user", inputValue)
           console.log("input:", inputValue);
-          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", access_token: accessToken })
+          const type = localStorage.getItem('type')
+          var api_key: string = ""
+          if (type != null && type != 'local') {
+            const try_key = localStorage.getItem(type)
+            if (try_key) {
+              api_key = try_key
+            }
+          }
+          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: localStorage.getItem('model'), model_type: type, access_token: accessToken, api_key: api_key })
           startGetWorker()
         }
       }

app/backend/database.ts

@@ -18,27 +18,28 @@ if all went well, you will get the status 200 in response.data.status
 to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not.
 */
 
-export const sendToDatabase = (data: any): Promise<boolean> => {
+export const sendToDatabase = async (data: any): Promise<boolean> => {
-  return axios.post("http://localhost:5000/interstellar_ai/db", data)
+  try {
-    .then(response => {
+    const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
     const status = response.data.status;
     const success = response.data.response;
     postMessage({ status, success });
-      return success;  // Ensure success is returned to the caller
+    console.log(status);
-    })
+    return success;
-    .catch(error => {
+  } catch (error) {
     postMessage({ status: 500, success: false });
-      return false;  // Return false in case of an error
+    console.log("NO");
-    });
+    return false;
+  }
 };
 
 // Functions for each action
 export const createAccount = async (username: string, email: string, password: string) => {
   const data = {
     action: "create_account",
-    username,
+    username: username,
-    email,
+    email: email,
-    password,
+    password: password,
   };
   return await sendToDatabase(data);
 };

app/backend/threads/PostWorker.js

@@ -1,14 +1,15 @@
 import axios from "axios";
 
 onmessage = (e) => {
-    const { messages, ai_model = "llama3.2", access_token } = e.data
+    const { messages, ai_model, model_type, access_token, api_key } = e.data
 
 
     const Message = {
         messages: messages,
-        ai_model: "llama3.2",
+        ai_model: ai_model,
-        model_type: "local",
+        model_type: model_type,
-        access_token: access_token
+        access_token: access_token,
+        api_key: api_key
     }
 
     console.log(Message);

app/backend/voice_backend.ts

@@ -6,7 +6,6 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
     const formdata = new FormData()
     formdata.append("audio", audio_data)
 
-    const dataSend = { option: "offline", type: "basic", audio: audio_data }
     return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
         .then((response) => {
             console.log(response.data)

app/components/Login.tsx

@@ -55,9 +55,12 @@ const Login: React.FC = () => {
     const savedAccountName = localStorage.getItem('accountName');
 
     // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials
-    const accountIdentifier = savedAccountName || savedAccountEmail;
+    var accountIdentifier = savedAccountName || savedAccountEmail;
+    if (!accountIdentifier) {
+      accountIdentifier = accountName
+    }
 
-    if (accountIdentifier && password === savedAccountPassword) {
+    if (accountIdentifier && password) {
       const success = await checkCredentials(accountIdentifier, password);
       if (success) {
         setIsLoggedIn(true); // Successful login

app/components/Models.tsx

@@ -240,6 +240,9 @@ const Models: React.FC = () => {
     console.log(model)
     console.log(category)
     console.log(modelList[category][model as keyof typeof modelList[typeof category]]);
+    console.log(modelList[category]['model_type' as keyof typeof modelList[typeof category]])
+    localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
+    localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
   }
 
   return (

app/components/Settings.tsx

@@ -11,6 +11,7 @@ import {
   checkCredentials,
   deleteAccount,
 } from '../backend/database';
+import { equal } from 'assert';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
@@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
     const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
+    const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
+    const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
+    const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
+    const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
+    const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
+    const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
+    const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
+    const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
+
 
     // Theme selection
-    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
+    const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    useEffect(() => {
+      const savedTheme = localStorage.getItem('selectedTheme');
+      if (savedTheme) {
+        setSelectedTheme(savedTheme);
+        // Apply the saved theme on initial load
+        switch (savedTheme) {
+          case 'IOMARKET':
+            applyIOMarketTheme();
+            break;
+          case 'WHITE':
+            applyWhiteTheme();
+            break;
+          case 'BLACK':
+            applyBlackTheme();
+            break;
+          case 'CUSTOM':
+            // Handle custom theme application here if necessary
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts
 
     // API Keys
     const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
@@ -146,8 +181,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           openai,
           anthropic,
           google,
+          // Additional theme settings
+          faqBackgroundColor,
+          faqHeadingColor,
+          faqItemBackgroundColor,
+          faqItemHeadingColor,
+          faqItemTextColor,
+          faqItemHoverBackgroundColor,
+          popupBackgroundColor,
+          overlayTextColor,
       };
-
         // Update local storage
       for (const [key, value] of Object.entries(settings)) {
           if (typeof value === 'boolean') {
@@ -196,6 +239,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     openai,
     anthropic,
     google,
+    // Additional theme settings
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,
   ]);
 
   useEffect(() => {
@@ -311,11 +363,45 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (settings.burgerMenu) {
-      setBurgerMenu(settings.fontSize);
+        setBurgerMenu(settings.burgerMenu);
-      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
+        document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
+      }
+
+      // Additional theme settings
+      if (settings.faqBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
+      }
+
+      if (settings.faqHeadingColor) {
+        document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
+      }
+
+      if (settings.faqItemBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
+      }
+
+      if (settings.faqItemHeadingColor) {
+        document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
+      }
+
+      if (settings.faqItemTextColor) {
+        document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
+      }
+
+      if (settings.faqItemHoverBackgroundColor) {
+        document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
+      }
+
+      if (settings.popupBackgroundColor) {
+        document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
+      }
+
+      if (settings.overlayTextColor) {
+        document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
       }
     };
 
+
     // Function to handle updating all credentials
     const handleUpdateCredentials = async () => {
       // Update account information
@@ -532,28 +618,31 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   <select
                     value={selectedTheme}
                     onChange={(e) => {
-                    const theme = e.target.value; // Get the selected value from the event
+                      const theme = e.target.value;
-                    setSelectedTheme(theme); // Update state for selected theme
+                      if (theme !== "default") {
+                        setSelectedTheme(theme);
+                        localStorage.setItem("selectedTheme", theme);
           
                         // Apply the appropriate theme based on selection
-                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
+                        switch (theme) {
                           case 'IOMARKET':
-                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                           case 'WHITE':
-                        applyWhiteTheme(); // Call the function to apply the WHITE theme
+                            applyWhiteTheme();
                             break;
                           case 'BLACK':
-                        applyBlackTheme(); // Call the function to apply the BLACK theme
+                            applyBlackTheme();
                             break;
                           case 'CUSTOM':
                             // Handle custom theme logic here if necessary
                             break;
                           default:
-                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
+                            applyIOMarketTheme();
                             break;
                         }
-                  }} // Handle theme selection
+                      }
+                    }}
                   >
                     <option value="default">Select your style...</option>
                     <option value="IOMARKET">IOMARKET</option>
@@ -562,10 +651,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     <option value="CUSTOM">CUSTOM</option>
                   </select>
                 </div>
-
                 {/* Conditionally render theme settings only if "CUSTOM" is selected */}
                 {selectedTheme === 'CUSTOM' && (
                   <>
+                    {/* Font Size */}
                     <div className="settings-option">
                       <p>Font Size</p>
                       <input
@@ -582,6 +671,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       <span>{fontSize}</span>
                     </div>
 
+                    {/* Background Color */}
                     <div className="settings-option">
                       <p>Background Color</p>
                       <input
@@ -595,6 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Text Color */}
                     <div className="settings-option">
                       <p>Text Color</p>
                       <input
@@ -608,6 +699,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Background Color */}
                     <div className="settings-option">
                       <p>Input Background Color</p>
                       <input
@@ -621,6 +713,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Color */}
                     <div className="settings-option">
                       <p>Input Button Color</p>
                       <input
@@ -634,6 +727,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Input Button Hover Color */}
                     <div className="settings-option">
                       <p>Input Button Hover Color</p>
                       <input
@@ -647,6 +741,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Background Color */}
                     <div className="settings-option">
                       <p>User Message Background Color</p>
                       <input
@@ -660,6 +755,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* User Message Text Color */}
                     <div className="settings-option">
                       <p>User Message Text Color</p>
                       <input
@@ -673,6 +769,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Background Color */}
                     <div className="settings-option">
                       <p>AI Message Background Color</p>
                       <input
@@ -686,6 +783,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* AI Message Text Color */}
                     <div className="settings-option">
                       <p>AI Message Text Color</p>
                       <input
@@ -699,6 +797,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Background Color */}
                     <div className="settings-option">
                       <p>Button Background Color</p>
                       <input
@@ -712,6 +811,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Button Hover Background Color */}
                     <div className="settings-option">
                       <p>Button Hover Background Color</p>
                       <input
@@ -725,6 +825,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Models Background Color */}
                     <div className="settings-option">
                       <p>Models Background Color</p>
                       <input
@@ -738,6 +839,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* History Background Color */}
                     <div className="settings-option">
                       <p>History Background Color</p>
                       <input
@@ -751,6 +853,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Left Panel Background Color */}
                     <div className="settings-option">
                       <p>Left Panel Background Color</p>
                       <input
@@ -764,6 +867,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Conversation Background Color */}
                     <div className="settings-option">
                       <p>Conversation Background Color</p>
                       <input
@@ -777,6 +881,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Pop-up Text Color */}
                     <div className="settings-option">
                       <p>Pop-up Text Color</p>
                       <input
@@ -790,19 +895,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
-                  <div className="settings-option">
+                    {/* Input Border Color */}
-                    <p>Burger Menu Color</p>
-                    <input
-                      type="color"
-                      value={burgerMenu}
-                      onChange={(e) => {
-                        const newColor = e.target.value;
-                        setBurgerMenu(newColor);
-                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
-                      }}
-                    />
-                  </div>
-
                     <div className="settings-option">
                       <p>Input Border Color</p>
                       <input
@@ -816,6 +909,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       />
                     </div>
 
+                    {/* Font Family */}
                     <div className="settings-option">
                       <p>Font Family</p>
                       <select
@@ -843,6 +937,117 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                       </select>
                     </div>
 
+                    {/* FAQ Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Background Color</p>
+                      <input
+                        type="color"
+                        value={faqBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Heading Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Heading Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHeadingColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHeadingColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Text Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Text Color</p>
+                      <input
+                        type="color"
+                        value={faqItemTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemTextColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-text-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* FAQ Item Hover Background Color */}
+                    <div className="settings-option">
+                      <p>FAQ Item Hover Background Color</p>
+                      <input
+                        type="color"
+                        value={faqItemHoverBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setFaqItemHoverBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Popup Background Color */}
+                    <div className="settings-option">
+                      <p>Popup Background Color</p>
+                      <input
+                        type="color"
+                        value={popupBackgroundColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setPopupBackgroundColor(newColor);
+                          document.documentElement.style.setProperty('--popup-background-color', newColor);
+                        }}
+                      />
+                    </div>
+
+                    {/* Overlay Text Color */}
+                    <div className="settings-option">
+                      <p>Overlay Text Color</p>
+                      <input
+                        type="color"
+                        value={overlayTextColor}
+                        onChange={(e) => {
+                          const newColor = e.target.value;
+                          setOverlayTextColor(newColor);
+                          document.documentElement.style.setProperty('--overlay-text-color', newColor);
+                        }}
+                      />
+                    </div>
                   </>
                 )}
             </div>
@@ -1033,7 +1238,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     mistral,
     openai,
     anthropic,
-   google
+    google,
+  
+    // Additional theme settings if needed
+    faqBackgroundColor,
+    faqHeadingColor,
+    faqItemBackgroundColor,
+    faqItemHeadingColor,
+    faqItemTextColor,
+    faqItemHoverBackgroundColor,
+    popupBackgroundColor,
+    overlayTextColor,  
 };
 
 
@@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={() => { 
                   applySettings; 
                   getAllLocalStorageItems(); 
-                  closeSettings(); // This is invoked when the button is clicked
+                  closeSettings(); 
               }}>
                   Apply
             </button>

app/components/theme.ts

@@ -92,5 +92,66 @@ export const applyBlackTheme = () => {
     document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
     document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
     document.documentElement.style.setProperty('--font-size', '16px'); // Font size
-    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
 };
+
+export const applyCustomTheme = () => {
+    // Theme variables   
+    const themeVariables = {
+        backgroundColor: localStorage.getItem('backgroundColor'),
+        textColor: localStorage.getItem('textColor'),
+        inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+        inputButtonColor: localStorage.getItem('inputButtonColor'),
+        inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+        userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+        userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+        aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+        aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+        buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+        buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+        modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+        historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+        leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+        conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+        popUpTextColor: localStorage.getItem('popUpTextColor'),
+        inputBorderColor: localStorage.getItem('inputBorderColor'),
+        fontFamily: localStorage.getItem('fontFamily'),
+        fontSize: localStorage.getItem('fontSize'),
+        burgerMenu: localStorage.getItem('burgerMenu'),
+        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+        popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
+        overlayTextColor: localStorage.getItem('overlayTextColor'),
+      };
+          
+      document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
+      document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
+      document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
+      document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
+      document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
+      document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
+      document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
+      document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
+      document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
+      document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
+      document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
+      document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
+      document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
+      document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
+      document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
+      document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
+      document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
+      document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
+      document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
+      document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
+      document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
+      document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
+      document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
+      document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
+    
+}

app/page.tsx

@@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
 import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
+import Settings from './components/Settings';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
     }
   };
 
+  const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+    useEffect(() => {
+      const savedTheme = localStorage.getItem('selectedTheme');
+      if (savedTheme) {
+        setSelectedTheme(savedTheme);
+        // Apply the saved theme on initial load
+        switch (savedTheme) {
+          case 'IOMARKET':
+            applyIOMarketTheme();
+            break;
+          case 'WHITE':
+            applyWhiteTheme();
+            break;
+          case 'BLACK':
+            applyBlackTheme();
+            break;
+          case 'CUSTOM':
+            applyCustomTheme();
+            break;
+          default:
+            applyIOMarketTheme();
+            break;
+        }
+      }   
+    }, []); // Runs only once when the component mounts          
+
   return (
     <>
         <Header

py/api.py

@@ -89,20 +89,20 @@ class API:
 
         @self.app.route('/interstellar_ai/db', methods=['POST'])
         def db_manipulate():
-            action = request.args.get('action')
+            sent_data = request.get_json()
-            data = request.args.get('data')
+            action = sent_data.get('action')
             if action == "create_account":
-                return jsonify({'status': 200, 'response': self.db.add_user(data)})
+                return jsonify({'status': 200, 'response': self.db.add_user(sent_data)})
             elif action == "change_password":
-                return jsonify({'status': 200, 'response': self.db.update_password(data)})
+                return jsonify({'status': 200, 'response': self.db.update_password(sent_data)})
             elif action == "get_data":
-                return jsonify({'status': 200, 'response': self.db.get_data(data)})
+                return jsonify({'status': 200, 'response': self.db.get_data(sent_data)})
             elif action == "change_data":
-                return jsonify({'status': 200, 'response': self.db.change_data(data)})
+                return jsonify({'status': 200, 'response': self.db.change_data(sent_data)})
             elif action == "check_credentials":
-                return jsonify({'status': 200, 'response': self.db.check_credentials(data)})
+                return jsonify({'status': 200, 'response': self.db.check_credentials(sent_data)})
             elif action == "delete_account":
-                return jsonify({'status': 200, 'response': self.db.delete_user(data)})
+                return jsonify({'status': 200, 'response': self.db.delete_user(sent_data)})
 
             return jsonify({'status': 401, 'response': "Invalid action"})
 

py/db.py

@@ -9,11 +9,15 @@ class DB:
         self.database = {}
 
     def ensure_username(self, data):
-        if hasattr(data, 'username'):
+        print(data)
-            return data.get['username']
+        print(self.database)
-        elif hasattr(data, 'email'):
+        if 'username' in data:
+            print("usr")
+            return data.get('username')
+        elif 'email' in data:
+            print("email")
             for index, entry in self.database:
-                if entry.get['email'] == data.get['email']:
+                if entry.get('email') == data.get('email'):
                     return index
 
     @staticmethod
@@ -23,19 +27,22 @@ class DB:
         return hashed_password
 
     def add_user(self, data):
-        username = data.get['username']
+        username = data.get('username')
-        password = data.get['password']
+        password = data.get('password')
-        email = data.get['email']
+        email = data.get('email')
         hashed_password = self.hash_password(password)
         user_data = {"hashed_password": hashed_password, "email": email, "data": None}
         if username not in self.database:
             self.database[username] = user_data
+            print("yes")
+            self.save_database()
             return True
+        print("fail")
         return False
 
     def delete_user(self, data):
         username = self.ensure_username(data)
-        data = data.get['data']
+        data = data.get('data')
         if not self.check_credentials(data):
             return False
 
@@ -45,7 +52,7 @@ class DB:
 
     def change_data(self, data):
         username = self.ensure_username(data)
-        data = data.get['data']
+        data = data.get('data')
         if not self.check_credentials(data):
             return False
 
@@ -55,7 +62,7 @@ class DB:
 
     def update_password(self, data):
         username = self.ensure_username(data)
-        new_password = data.get['new_password']
+        new_password = data.get('new_password')
         if not self.check_credentials(data):
             return False
 
@@ -66,12 +73,15 @@ class DB:
 
     def check_credentials(self, data):
         username = self.ensure_username(data)
-        password = data.get['password']
+        password = data.get('password')
         if username not in self.database:
+            print("no username")
+            print(username)
             return False
 
         stored_hashed_password = self.database[username]["hashed_password"]
         entered_hashed_password = self.hash_password(password)
+        print(stored_hashed_password == entered_hashed_password)
         return stored_hashed_password == entered_hashed_password
 
     def get_data(self, data):
@@ -79,7 +89,7 @@ class DB:
         if not self.check_credentials(data):
             return None
 
-        send_back = self.database[username].get['data']
+        send_back = self.database[username].get('data')
         return send_back
 
     def save_database(self):
@@ -90,6 +100,7 @@ class DB:
 
         else:
             with open("database.json", 'w') as file:
+                print("saving")
                 json.dump(self.database, file)
 
     def load_database(self):