forked from React-Group/interstellar_ai
Merge pull request 'main' (#36) from React-Group/interstellar_ai:main into main
Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/interstellar_ai/pulls/36
This commit is contained in:
commit
dbcf1f7d0c
8 changed files with 149 additions and 125 deletions
|
@ -6,7 +6,7 @@ type ChatMessage = {
|
|||
|
||||
let chatHistory: ChatMessage[] = [];
|
||||
|
||||
function addMessageHistory(name: string, message: any): void {
|
||||
function addMessageToHistory(name: string, message: any): void {
|
||||
const newMessage: ChatMessage = {
|
||||
name: name,
|
||||
messages: message,
|
||||
|
@ -16,7 +16,7 @@ function addMessageHistory(name: string, message: any): void {
|
|||
console.log(`Added message from ${name}: ${message}`);
|
||||
}
|
||||
|
||||
function removeMessageHistory(timestamp: number): void {
|
||||
function removeMessageFromHistory(timestamp: number): void {
|
||||
const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
|
||||
if (index > -1) {
|
||||
chatHistory.splice(index, 1);
|
||||
|
|
|
@ -15,7 +15,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
content: string
|
||||
}
|
||||
|
||||
// Define state variables for user preferences and messages
|
||||
// Define state variables for user preferences and messages
|
||||
const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
|
||||
const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
|
||||
const [timeFormat, setTimeFormat] = useState<string>("24-hour");
|
||||
|
@ -24,6 +24,8 @@ const InputOutputBackend: React.FC = () => {
|
|||
const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
|
||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
|
||||
apiURL.hostname = window.location.hostname;
|
||||
|
||||
// Fetch local storage values and update state on component mount
|
||||
useEffect(() => {
|
||||
|
@ -55,7 +57,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
{ role: "assistant", content: "Hello! How may I help you?" },
|
||||
]);
|
||||
}, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);
|
||||
|
||||
|
||||
|
||||
const conversationRef = useRef<HTMLDivElement>(null)
|
||||
const [copyClicked, setCopyClicked] = useState(false)
|
||||
|
@ -72,7 +74,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
useEffect(() => {
|
||||
getNewToken()
|
||||
|
||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
|
||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.ts", import.meta.url))
|
||||
|
||||
postWorkerRef.current.onmessage = (event) => {
|
||||
const status = event.data.status
|
||||
|
@ -101,7 +103,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
}, [])
|
||||
|
||||
const getNewToken = () => {
|
||||
axios.get("http://localhost:5000/interstellar_ai/api/ai_create")
|
||||
axios.get(apiURL.href)
|
||||
.then(response => {
|
||||
setAccessToken(response.data.access_token)
|
||||
})
|
||||
|
@ -113,9 +115,11 @@ const InputOutputBackend: React.FC = () => {
|
|||
|
||||
const startGetWorker = () => {
|
||||
if (!getWorkerRef.current) {
|
||||
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
|
||||
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url))
|
||||
|
||||
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken })
|
||||
const windowname = window.location.hostname
|
||||
|
||||
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname })
|
||||
|
||||
addMessage("assistant", "")
|
||||
getWorkerRef.current.onmessage = (event) => {
|
||||
|
@ -178,7 +182,8 @@ const InputOutputBackend: React.FC = () => {
|
|||
}
|
||||
}
|
||||
setInputMessage("")
|
||||
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key })
|
||||
const windowname = window.location.hostname
|
||||
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname })
|
||||
startGetWorker()
|
||||
}
|
||||
}
|
||||
|
@ -228,7 +233,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleStopClick = () => {
|
||||
const handleStopClick = () => {
|
||||
endGetWorker()
|
||||
getNewToken()
|
||||
}
|
||||
|
@ -246,7 +251,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
const handleEditClick = () => {
|
||||
let newestMessage = messages[messages.length - 2].content
|
||||
setInputMessage(newestMessage)
|
||||
const updatedMessages = messages.slice(0, messages.length-2)
|
||||
const updatedMessages = messages.slice(0, messages.length - 2)
|
||||
setMessages(updatedMessages)
|
||||
endGetWorker()
|
||||
getNewToken()
|
||||
|
|
|
@ -18,9 +18,12 @@ 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.
|
||||
*/
|
||||
|
||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/db")
|
||||
apiURL.hostname = window.location.hostname;
|
||||
|
||||
export const sendToDatabase = async (data: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
|
||||
const response = await axios.post(apiURL.href, data);
|
||||
const status = response.data.status;
|
||||
const success = response.data.response;
|
||||
postMessage({ status, success });
|
||||
|
@ -33,7 +36,7 @@ export const sendToDatabase = async (data: any): Promise<boolean> => {
|
|||
|
||||
export const sendToDatabaseAndGetString = async (data: any): Promise<string> => {
|
||||
try {
|
||||
const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
|
||||
const response = await axios.post(apiURL.href, data);
|
||||
const status = response.data.status;
|
||||
const success = response.data.response;
|
||||
postMessage({ status, success });
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
import axios from "axios";
|
||||
|
||||
let accesstoken
|
||||
let windownameGlobal = ""
|
||||
|
||||
let accesstoken = ""
|
||||
onmessage = (event) => {
|
||||
const { action, access_token } = event.data
|
||||
const { action, access_token, windowname } = event.data
|
||||
accesstoken = access_token
|
||||
|
||||
windownameGlobal = windowname
|
||||
|
||||
if (action === "start") {
|
||||
fetchData()
|
||||
} else if (action === "terminate") {
|
||||
|
@ -14,9 +18,12 @@ onmessage = (event) => {
|
|||
|
||||
const fetchData = () => {
|
||||
|
||||
const apiURL = "http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken
|
||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken)
|
||||
apiURL.hostname = windownameGlobal;
|
||||
|
||||
axios.get(apiURL)
|
||||
console.log(apiURL.href)
|
||||
|
||||
axios.get(apiURL.href)
|
||||
.then(response => {
|
||||
const data = response.data
|
||||
postMessage(data)
|
|
@ -1,7 +1,7 @@
|
|||
import axios from "axios";
|
||||
|
||||
onmessage = (e) => {
|
||||
const { messages, ai_model, model_type, access_token, api_key } = e.data
|
||||
const { messages, ai_model, model_type, access_token, api_key, windowname } = e.data
|
||||
|
||||
|
||||
const Message = {
|
||||
|
@ -12,7 +12,13 @@ onmessage = (e) => {
|
|||
api_key: api_key
|
||||
}
|
||||
|
||||
axios.post("http://localhost:5000/interstellar_ai/api/ai_send", Message)
|
||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_send")
|
||||
console.log(windowname)
|
||||
apiURL.hostname = windowname;
|
||||
|
||||
console.log(apiURL.href)
|
||||
|
||||
axios.post(apiURL.href, Message)
|
||||
.then(response => {
|
||||
const status = response.data.status
|
||||
postMessage({ status })
|
|
@ -5,7 +5,10 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
|
|||
const formdata = new FormData()
|
||||
formdata.append("audio", audio_data)
|
||||
|
||||
return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
|
||||
const apiURL = new URL("http://localhost:5000/interstellar_ai/api/voice_recognition")
|
||||
apiURL.hostname = window.location.hostname;
|
||||
|
||||
return axios.post(apiURL.href, formdata)
|
||||
.then((response) => {
|
||||
return response.data.response
|
||||
})
|
||||
|
|
|
@ -135,121 +135,121 @@ const modelList = {
|
|||
Image: 'pixtral-12b-2409'
|
||||
}
|
||||
}
|
||||
// Define the keys of modelList
|
||||
type ModelKeys = keyof typeof modelList;
|
||||
// Define the keys of modelList
|
||||
type ModelKeys = keyof typeof modelList;
|
||||
|
||||
const ModelSection: React.FC = () => {
|
||||
// Initialize state with value from localStorage or default to ''
|
||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
|
||||
const [radioSelection, setRadioSelection] = useState<string | null>("");
|
||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||
const ModelSection: React.FC = () => {
|
||||
// Initialize state with value from localStorage or default to ''
|
||||
const [selectedModelDropdown, setSelectedModelDropdown] = useState<ModelKeys>('Offline Fast');
|
||||
const [radioSelection, setRadioSelection] = useState<string | null>("");
|
||||
const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
|
||||
const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
|
||||
|
||||
useEffect(() => {
|
||||
// Load initial values from localStorage
|
||||
const temp = localStorage.getItem("activeSelectedAIFunction") || "";
|
||||
setActiveSelectedAIFunction(temp);
|
||||
useEffect(() => {
|
||||
// Load initial values from localStorage
|
||||
const temp = localStorage.getItem("activeSelectedAIFunction") || "";
|
||||
setActiveSelectedAIFunction(temp);
|
||||
|
||||
// Check if localStorage keys exist, else set defaults
|
||||
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||
localStorage.setItem("selectedModelDropdown", "Offline Fast");
|
||||
}
|
||||
// Check if localStorage keys exist, else set defaults
|
||||
if (!localStorage.getItem('selectedModelDropdown')) {
|
||||
localStorage.setItem("selectedModelDropdown", "Offline Fast");
|
||||
}
|
||||
|
||||
// Set the dropdown and selected AI function from localStorage
|
||||
const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
|
||||
const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
|
||||
// Set the dropdown and selected AI function from localStorage
|
||||
const storedSelectedModel = localStorage.getItem('selectedModelDropdown') as ModelKeys;
|
||||
const storedActiveFunction = localStorage.getItem("activeSelectedAIFunction") || 'Code';
|
||||
|
||||
setSelectedModelDropdown(storedSelectedModel);
|
||||
setCurrentSelectedAIFunction(storedActiveFunction);
|
||||
setSelectedModelDropdown(storedSelectedModel);
|
||||
setCurrentSelectedAIFunction(storedActiveFunction);
|
||||
|
||||
if (!localStorage.getItem("model")) {
|
||||
localStorage.setItem("model", 'starcoder2');
|
||||
}
|
||||
if (!localStorage.getItem("model")) {
|
||||
localStorage.setItem("model", 'starcoder2');
|
||||
}
|
||||
|
||||
if (!localStorage.getItem("radioSelection")) {
|
||||
localStorage.setItem("radioSelection", 'None');
|
||||
}
|
||||
if (!localStorage.getItem("radioSelection")) {
|
||||
localStorage.setItem("radioSelection", 'None');
|
||||
}
|
||||
|
||||
// Load radio selection from localStorage
|
||||
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
||||
}, []);
|
||||
// Load radio selection from localStorage
|
||||
setRadioSelection(localStorage.getItem('radioSelection') || '');
|
||||
}, []);
|
||||
|
||||
const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
|
||||
const filteredModels = Object.keys(modelList).filter(model => modelList[model as ModelKeys]);
|
||||
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const selectedModel = event.target.value as ModelKeys;
|
||||
setSelectedModelDropdown(selectedModel);
|
||||
localStorage.setItem('selectedModelDropdown', selectedModel);
|
||||
const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const selectedModel = event.target.value as ModelKeys;
|
||||
setSelectedModelDropdown(selectedModel);
|
||||
localStorage.setItem('selectedModelDropdown', selectedModel);
|
||||
|
||||
// Update model and type in local storage
|
||||
const modelType = modelList[selectedModel].model_type;
|
||||
const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
|
||||
// Update model and type in local storage
|
||||
const modelType = modelList[selectedModel].model_type;
|
||||
const model = modelList[selectedModel][activeSelectedAIFunction as keyof typeof modelList[typeof selectedModel]];
|
||||
|
||||
localStorage.setItem('model', model);
|
||||
localStorage.setItem('type', modelType);
|
||||
};
|
||||
|
||||
const isOfflineModel = (model: string) => {
|
||||
return modelList[model as ModelKeys].model_type === 'local';
|
||||
};
|
||||
|
||||
const modelClicked = (model: string) => {
|
||||
const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
|
||||
|
||||
if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
|
||||
const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
|
||||
localStorage.setItem('activeSelectedAIFunction', model);
|
||||
setActiveSelectedAIFunction(model);
|
||||
localStorage.setItem('model', newModel);
|
||||
localStorage.setItem('type', modelType);
|
||||
setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
|
||||
} else {
|
||||
console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="model-background">
|
||||
<div className="models">
|
||||
<div className="title">
|
||||
<h3>Different AI Models</h3>
|
||||
</div>
|
||||
|
||||
{/* Model Selection Dropdown */}
|
||||
<div className="model-dropdown">
|
||||
<label htmlFor="model-select">Select AI Model:</label>
|
||||
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
||||
{filteredModels.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Model Grid with Cards */}
|
||||
<div className="grid">
|
||||
{Object.keys(modelList[selectedModelDropdown])
|
||||
.filter((key) => key !== 'model_type') // Exclude model_type from display
|
||||
.map((displayedCategory) => (
|
||||
<button
|
||||
key={displayedCategory}
|
||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||
onClick={() => modelClicked(displayedCategory)}
|
||||
>
|
||||
<div className="overlay">
|
||||
<h3>{displayedCategory}</h3>
|
||||
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
localStorage.setItem('model', model);
|
||||
localStorage.setItem('type', modelType);
|
||||
};
|
||||
|
||||
const isOfflineModel = (model: string) => {
|
||||
return modelList[model as ModelKeys].model_type === 'local';
|
||||
};
|
||||
|
||||
const modelClicked = (model: string) => {
|
||||
const selectedAIFunction = currentSelectedAIFunction as keyof typeof modelList;
|
||||
|
||||
if (modelList[selectedModelDropdown] && modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]]) {
|
||||
const newModel = modelList[selectedModelDropdown][model as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
const modelType = modelList[selectedModelDropdown]['model_type' as keyof typeof modelList[typeof selectedModelDropdown]];
|
||||
|
||||
localStorage.setItem('activeSelectedAIFunction', model);
|
||||
setActiveSelectedAIFunction(model);
|
||||
localStorage.setItem('model', newModel);
|
||||
localStorage.setItem('type', modelType);
|
||||
setCurrentSelectedAIFunction(model); // Ensure to set current function when model is clicked
|
||||
} else {
|
||||
console.error(`Model ${model} not found for function ${selectedModelDropdown}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="model-background">
|
||||
<div className="models">
|
||||
<div className="title">
|
||||
<h3>Different AI Models</h3>
|
||||
</div>
|
||||
|
||||
{/* Model Selection Dropdown */}
|
||||
<div className="model-dropdown">
|
||||
<label htmlFor="model-select">Select AI Model:</label>
|
||||
<select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
|
||||
{filteredModels.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Model Grid with Cards */}
|
||||
<div className="grid">
|
||||
{Object.keys(modelList[selectedModelDropdown])
|
||||
.filter((key) => key !== 'model_type') // Exclude model_type from display
|
||||
.map((displayedCategory) => (
|
||||
<button
|
||||
key={displayedCategory}
|
||||
className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`}
|
||||
onClick={() => modelClicked(displayedCategory)}
|
||||
>
|
||||
<div className="overlay">
|
||||
<h3>{displayedCategory}</h3>
|
||||
{isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelSection;
|
||||
|
|
|
@ -84,9 +84,9 @@ header{
|
|||
|
||||
.header-login-button{
|
||||
height: 100%;
|
||||
width:4vw;
|
||||
width:max-content;
|
||||
font-size: var(--font-size);
|
||||
padding: 3px;
|
||||
padding: 0.5vw 1vw;
|
||||
background-color: var(--input-button-color);
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
|
|
Loading…
Reference in a new issue