From 7c67a5fec8b4e9a2fde625203340344475bf128a Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 24 Sep 2024 15:01:45 +0200
Subject: [PATCH] Setting changes
---
app/components/Settings.tsx | 239 +++++++++++++++++++-----------
app/components/json/black.json | 1 +
app/components/json/iomarket.json | 1 +
app/components/json/white.json | 1 +
app/styles/Settings.css | 13 ++
py/api.py | 2 +-
6 files changed, 172 insertions(+), 85 deletions(-)
create mode 100644 app/components/json/black.json
create mode 100644 app/components/json/iomarket.json
create mode 100644 app/components/json/white.json
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index ecc8a34..e3e626b 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -15,8 +15,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [newName, setNewName] = useState('');
const [newEmail, setNewEmail] = useState('');
const [newPassword, setNewPassword] = useState('');
+ const [preferredMessurement, setPreferredMessurement] = useState('Metric');
- // Theme settings state
+ // Theme settings state
const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
@@ -37,9 +38,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
- // Theme selection
- const [selectedTheme, setSelectedTheme] = useState<string>('default');
+ // Theme selection
+ const [selectedTheme, setSelectedTheme] = useState<string>('default');
+ // API Keys
+ const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+ const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+ const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+ const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+
// Apply imported settings to the CSS variables
const applySettings = (settings: any) => {
if (settings.backgroundColor) {
@@ -147,85 +154,102 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
case 'general':
return (
<div className="settings-section">
- <h2>General Settings</h2>
- <div className="settings-option">
- <label>Preferred Language</label>
- <select
- value={preferredLanguage}
- onChange={(e) => setPreferredLanguage(e.target.value)}
- >
- <option value="en">English</option>
- <option value="es">Spanish</option>
- <option value="fr">French</option>
- <option value="de">German</option>
- <option value="it">Italian</option>
- <option value="pt">Portuguese</option>
- <option value="zh">Chinese</option>
- <option value="ja">Japanese</option>
- <option value="ru">Russian</option>
- <option value="ar">Arabic</option>
- </select>
- </div>
- <div className="settings-option">
- <label>Preferred Currency</label>
- <select
- value={preferredCurrency}
- onChange={(e) => setPreferredCurrency(e.target.value)}
- >
- <option value="usd">USD</option>
- <option value="eur">EUR</option>
- <option value="gbp">GBP</option>
- <option value="jpy">JPY</option>
- <option value="cad">CAD</option>
- <option value="aud">AUD</option>
- <option value="chf">CHF</option>
- <option value="cny">CNY</option>
- <option value="inr">INR</option>
- </select>
- </div>
- <div className="settings-option">
- <label>Date Format</label>
- <select
- value={dateFormat}
- onChange={(e) => setDateFormat(e.target.value)}
- >
- <option value="mm/dd/yyyy">MM/DD/YYYY</option>
- <option value="dd/mm/yyyy">DD/MM/YYYY</option>
- <option value="yyyy-mm-dd">YYYY-MM-DD</option>
- <option value="mm-dd-yyyy">MM-DD-YYYY</option>
- <option value="dd-mm-yyyy">DD-MM-YYYY</option>
- </select>
- </div>
- <div className="settings-option">
- <label>Time Format</label>
- <select
- value={timeFormat}
- onChange={(e) => setTimeFormat(e.target.value)}
- >
- <option value="12-hour">12 Hour</option>
- <option value="24-hour">24 Hour</option>
- </select>
- </div>
- <div className="settings-option">
- <label>Time Zone</label>
- <select
- value={timeZone}
- onChange={(e) => setTimeZone(e.target.value)}
- >
- <option value="GMT">GMT</option>
- <option value="EST">EST</option>
- <option value="CST">CST</option>
- <option value="MST">MST</option>
- <option value="PST">PST</option>
- <option value="UTC">UTC</option>
- <option value="BST">BST</option>
- <option value="IST">IST</option>
- <option value="CET">CET</option>
- <option value="JST">JST</option>
- </select>
- </div>
+ <h2>General Settings</h2>
+
+ <div className="settings-option">
+ <label>Preferred Language</label>
+ <select
+ value={preferredLanguage}
+ onChange={(e) => setPreferredLanguage(e.target.value)}
+ >
+ <option value="en">English</option>
+ <option value="es">Spanish</option>
+ <option value="fr">French</option>
+ <option value="de">German</option>
+ <option value="it">Italian</option>
+ <option value="pt">Portuguese</option>
+ <option value="zh">Chinese</option>
+ <option value="ja">Japanese</option>
+ <option value="ru">Russian</option>
+ <option value="ar">Arabic</option>
+ </select>
</div>
- );
+
+ <div className="settings-option">
+ <label>Preferred Currency</label>
+ <select
+ value={preferredCurrency}
+ onChange={(e) => setPreferredCurrency(e.target.value)}
+ >
+ <option value="usd">USD</option>
+ <option value="eur">EUR</option>
+ <option value="gbp">GBP</option>
+ <option value="jpy">JPY</option>
+ <option value="cad">CAD</option>
+ <option value="aud">AUD</option>
+ <option value="chf">CHF</option>
+ <option value="cny">CNY</option>
+ <option value="inr">INR</option>
+ </select>
+ </div>
+
+ <div className="settings-option">
+ <label>Date Format</label>
+ <select
+ value={dateFormat}
+ onChange={(e) => setDateFormat(e.target.value)}
+ >
+ <option value="mm/dd/yyyy">MM/DD/YYYY</option>
+ <option value="dd/mm/yyyy">DD/MM/YYYY</option>
+ <option value="yyyy-mm-dd">YYYY-MM-DD</option>
+ <option value="mm-dd-yyyy">MM-DD-YYYY</option>
+ <option value="dd-mm-yyyy">DD-MM-YYYY</option>
+ </select>
+ </div>
+
+ <div className="settings-option">
+ <label>Time Format</label>
+ <select
+ value={timeFormat}
+ onChange={(e) => setTimeFormat(e.target.value)}
+ >
+ <option value="12-hour">12 Hour</option>
+ <option value="24-hour">24 Hour</option>
+ </select>
+ </div>
+
+ <div className="settings-option">
+ <label>Time Zone</label>
+ <select
+ value={timeZone}
+ onChange={(e) => setTimeZone(e.target.value)}
+ >
+ <option value="GMT">GMT</option>
+ <option value="EST">EST</option>
+ <option value="CST">CST</option>
+ <option value="MST">MST</option>
+ <option value="PST">PST</option>
+ <option value="UTC">UTC</option>
+ <option value="BST">BST</option>
+ <option value="IST">IST</option>
+ <option value="CET">CET</option>
+ <option value="JST">JST</option>
+ </select>
+ </div>
+
+ {/* New Preferred Measurement Option */}
+ <div className="settings-option">
+ <label>Preferred Measurement</label>
+ <select
+ value={preferredMessurement}
+ onChange={(e) => setPreferredMessurement(e.target.value)}
+ >
+ <option value="Metric">Metric</option>
+ <option value="Imperial">Imperial</option>
+ </select>
+ </div>
+ </div>
+ );
case 'privacy':
return (
@@ -697,17 +721,55 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
</div>
);
+ case 'api':
+ return (
+ <div className="settings-section">
+ <div className="settings-option">
+ <label>La Plateforme</label>
+ <input
+ type="text"
+ value={laPlateforme}
+ onChange={(e) => setLaPlateforme(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <label>OpenAI</label>
+ <input
+ type="text"
+ value={openAI}
+ onChange={(e) => setOpenAI(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <label>Anthropic</label>
+ <input
+ type="text"
+ value={anthropic}
+ onChange={(e) => setAnthropic(e.target.value)}
+ />
+ </div>
+ <div className="settings-option">
+ <label>Google</label>
+ <input
+ type="text"
+ value={google}
+ onChange={(e) => setGoogle(e.target.value)}
+ />
+ </div>
+ </div>
+ );
+
case 'im/export':
return (
<div className="settings-section">
<h2>Import & Export</h2>
<div className="settings-option">
<h3>Export the settings</h3>
- <button onClick={() => exportSettings(currentSettings)}>Export Settings</button>
+ <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
</div>
<div className="settings-option">
<h3>Import the settings</h3>
- <input type="file" onChange={handleImport} accept=".json" />
+ <input type="file" onChange={handleImport} accept=".json" className='import-file'/>
</div>
</div>
);
@@ -748,6 +810,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
fontSize,
preferredLanguage,
preferredCurrency,
+ preferredMessurement,
dateFormat,
timeFormat,
timeZone,
@@ -755,7 +818,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
disableChatHistory,
disableAIMemory,
openSourceMode,
- };
+
+ // API Keys
+ laPlateforme,
+ openAI,
+ anthropic,
+ google
+};
+
return (
<div className="popup-overlay">
@@ -768,6 +838,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<li onClick={() => setActiveSection('theme')}>Theme</li>
<li onClick={() => setActiveSection('foss')}>FOSS</li>
<li onClick={() => setActiveSection('account')}>Account</li>
+ <li onClick={() => setActiveSection('api')}>API Keys</li>
<li onClick={() => setActiveSection('im/export')}>Import/Export</li>
</ul>
</div>
diff --git a/app/components/json/black.json b/app/components/json/black.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/black.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/components/json/iomarket.json b/app/components/json/iomarket.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/iomarket.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/components/json/white.json b/app/components/json/white.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/white.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index bf88759..a2224a4 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -147,3 +147,16 @@
display: block;
font-weight: bold;
}
+
+.export-button{
+ background-color: var(--button-hover-background-color);
+ padding: 10px;
+ margin: 10px;
+ border-radius: 10px;
+}
+
+.import-file{
+ background-color: var(--button-hover-background-color);
+ padding: 10px;
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/py/api.py b/py/api.py
index 508a9bd..fc6f8eb 100644
--- a/py/api.py
+++ b/py/api.py
@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify
+ from flask import Flask, request, jsonify
from flask_cors import CORS
import secrets
import threading