From d70b94445b91fb2146bb219520aa5b053c8c5eb0 Mon Sep 17 00:00:00 2001 From: JYC0413 Date: Fri, 28 Jun 2024 00:00:51 +0800 Subject: [PATCH 1/5] Support OpenAI compatible local AI server --- src/App.js | 1330 ++++++++++++++++++++++++++++------------------------ 1 file changed, 717 insertions(+), 613 deletions(-) diff --git a/src/App.js b/src/App.js index a9e5b77..7b762b2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,637 +1,741 @@ -import React, { useState, useEffect } from 'react'; -import { - Paper, TextField, Button, Typography, - List, ListItem, IconButton, Box, Select, MenuItem, FormControl, InputLabel, Slider, Dialog, DialogTitle, DialogContent, DialogActions, - Switch, FormControlLabel, Grid +import React, {useEffect, useState} from 'react'; +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + FormControl, + FormControlLabel, + Grid, + IconButton, + InputLabel, + List, + ListItem, + MenuItem, + Paper, + Select, + Slider, + Switch, + TextField, + Typography } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import AddIcon from '@mui/icons-material/Add'; import SaveIcon from '@mui/icons-material/Save'; import axios from 'axios'; -import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; +import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels'; function App() { - const [modelConfigs, setModelConfigs] = useState([ - { - id: Date.now(), - provider: 'openai', - model: 'gpt-3.5-turbo', - temperature: 0.7, - maxTokens: 1000, - apiKey: '', - endpoint: 'https://api.openai.com/v1/chat/completions', - prompts: [{ id: Date.now(), systemPrompt: '', userPrompt: '', output: '' }] + const ProviderCanQueryModelList = ["llamaedge"] + + const [modelConfigs, setModelConfigs] = useState([ + { + id: Date.now(), + provider: 'openai', + model: 'gpt-3.5-turbo', + temperature: 0.7, + maxTokens: 1000, + apiKey: '', + endpoint: 'https://api.openai.com/v1/chat/completions', + prompts: [{id: Date.now(), systemPrompt: '', userPrompt: '', output: ''}] + } + ]); + const [variables, setVariables] = useState([]); + const [savedPrompts, setSavedPrompts] = useState([]); + const [savedModels, setSavedModels] = useState([]); + const [savedVariables, setSavedVariables] = useState([]); + const [openSaveModelDialog, setOpenSaveModelDialog] = useState(false); + const [openSaveVariablesDialog, setOpenSaveVariablesDialog] = useState(false); + const [openSavePromptDialog, setOpenSavePromptDialog] = useState(false); + const [modelNameToSave, setModelNameToSave] = useState(''); + const [variablesNameToSave, setVariablesNameToSave] = useState(''); + const [promptNameToSave, setPromptNameToSave] = useState(''); + const [modelToSave, setModelToSave] = useState(null); + const [promptToSave, setPromptToSave] = useState(null); + const [globalSystemPrompt, setGlobalSystemPrompt] = useState(''); + const [globalUserPrompt, setGlobalUserPrompt] = useState(''); + const [useGlobalPrompt, setUseGlobalPrompt] = useState(false); + + const [modelsList, setModelsList] = useState({}); + + useEffect(() => { + const saved = localStorage.getItem('savedPrompts'); + if (saved) setSavedPrompts(JSON.parse(saved)); + const savedModelsData = localStorage.getItem('savedModels'); + if (savedModelsData) setSavedModels(JSON.parse(savedModelsData)); + const savedVariablesData = localStorage.getItem('savedVariables'); + if (savedVariablesData) setSavedVariables(JSON.parse(savedVariablesData)); + }, []); + + const handleAddVariable = () => setVariables([...variables, {name: '', value: ''}]); + + const handleVariableChange = (index, field, value) => { + const newVariables = [...variables]; + newVariables[index][field] = value; + setVariables(newVariables); + }; + + const handleDeleteVariable = (index) => { + const newVariables = variables.filter((_, i) => i !== index); + setVariables(newVariables); + }; + + const queryModel = async (id, url) => { + try { + let baseUrl = url.split('/').slice(0, 4).join('/'); + const query = await fetch(baseUrl+"/models") + const queryData = await query.json() + const newData = {...modelsList} + newData[id] = queryData.data.map(model => model.id) + setModelsList(newData) + }catch (e) { + console.log(e) + } } - ]); - const [variables, setVariables] = useState([]); - const [savedPrompts, setSavedPrompts] = useState([]); - const [savedModels, setSavedModels] = useState([]); - const [savedVariables, setSavedVariables] = useState([]); - const [openSaveModelDialog, setOpenSaveModelDialog] = useState(false); - const [openSaveVariablesDialog, setOpenSaveVariablesDialog] = useState(false); - const [openSavePromptDialog, setOpenSavePromptDialog] = useState(false); - const [modelNameToSave, setModelNameToSave] = useState(''); - const [variablesNameToSave, setVariablesNameToSave] = useState(''); - const [promptNameToSave, setPromptNameToSave] = useState(''); - const [modelToSave, setModelToSave] = useState(null); - const [promptToSave, setPromptToSave] = useState(null); - const [globalSystemPrompt, setGlobalSystemPrompt] = useState(''); - const [globalUserPrompt, setGlobalUserPrompt] = useState(''); - const [useGlobalPrompt, setUseGlobalPrompt] = useState(false); - - useEffect(() => { - const saved = localStorage.getItem('savedPrompts'); - if (saved) setSavedPrompts(JSON.parse(saved)); - const savedModelsData = localStorage.getItem('savedModels'); - if (savedModelsData) setSavedModels(JSON.parse(savedModelsData)); - const savedVariablesData = localStorage.getItem('savedVariables'); - if (savedVariablesData) setSavedVariables(JSON.parse(savedVariablesData)); - }, []); - - const handleAddVariable = () => setVariables([...variables, { name: '', value: '' }]); - - const handleVariableChange = (index, field, value) => { - const newVariables = [...variables]; - newVariables[index][field] = value; - setVariables(newVariables); - }; - - const handleDeleteVariable = (index) => { - const newVariables = variables.filter((_, i) => i !== index); - setVariables(newVariables); - }; - - const handleModelConfigChange = (id, field, value) => { - const newConfigs = modelConfigs.map(config => - config.id === id ? {...config, [field]: value} : config - ); - setModelConfigs(newConfigs); - }; - - const handleAddModel = () => { - const newModel = { - id: Date.now(), - provider: 'openai', - model: 'gpt-3.5-turbo', - temperature: 0.7, - maxTokens: 1000, - apiKey: '', - endpoint: 'https://api.openai.com/v1/chat/completions', - prompts: [{ id: Date.now(), systemPrompt: '', userPrompt: '', output: '' }] + + const handleModelConfigChange = (id, field, value) => { + const newConfigs = modelConfigs.map(config => { + if (config.id === id) { + if (field === "endpoint" && ProviderCanQueryModelList.includes(config.provider) && value) { + queryModel(id, value) + } + return {...config, [field]: value} + } else { + return config + } + }); + setModelConfigs(newConfigs); }; - setModelConfigs([...modelConfigs, newModel]); - }; - - const handleDeleteModel = (id) => { - const newConfigs = modelConfigs.filter(config => config.id !== id); - setModelConfigs(newConfigs); - }; - - const handleAddPrompt = (modelId) => { - const newConfigs = modelConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - prompts: [...config.prompts, { id: Date.now(), systemPrompt: '', userPrompt: '', output: '' }] - }; - } - return config; - }); - setModelConfigs(newConfigs); - }; - - const handlePromptChange = (modelId, promptId, field, value) => { - const newConfigs = modelConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - prompts: config.prompts.map(prompt => - prompt.id === promptId ? {...prompt, [field]: value} : prompt - ) - }; - } - return config; - }); - setModelConfigs(newConfigs); - }; - - const handleDeletePrompt = (modelId, promptId) => { - const newConfigs = modelConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - prompts: config.prompts.filter(prompt => prompt.id !== promptId) + + const handleMultipleModelConfigChange = (id, updates) => { + const newConfigs = modelConfigs.map(config => + config.id === id ? {...config, ...updates} : config + ); + setModelConfigs(newConfigs); + }; + + const handleAddModel = () => { + const newModel = { + id: Date.now(), + provider: 'openai', + model: 'gpt-3.5-turbo', + temperature: 0.7, + maxTokens: 1000, + apiKey: '', + endpoint: 'https://api.openai.com/v1/chat/completions', + prompts: [{id: Date.now(), systemPrompt: '', userPrompt: '', output: ''}] }; - } - return config; - }); - setModelConfigs(newConfigs); - }; - - const openSavePromptDialogHandler = (modelId, promptId) => { - setPromptToSave({ modelId, promptId }); - setPromptNameToSave(''); - setOpenSavePromptDialog(true); - }; - - const savePrompt = () => { - if (promptNameToSave) { - let promptContent; - if (useGlobalPrompt) { - promptContent = { systemPrompt: globalSystemPrompt, userPrompt: globalUserPrompt }; - } else if (promptToSave) { - const { modelId, promptId } = promptToSave; + setModelConfigs([...modelConfigs, newModel]); + }; + + const handleDeleteModel = (id) => { + const newConfigs = modelConfigs.filter(config => config.id !== id); + setModelConfigs(newConfigs); + }; + + const handleAddPrompt = (modelId) => { + const newConfigs = modelConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + prompts: [...config.prompts, {id: Date.now(), systemPrompt: '', userPrompt: '', output: ''}] + }; + } + return config; + }); + setModelConfigs(newConfigs); + }; + + const handlePromptChange = (modelId, promptId, field, value) => { + const newConfigs = modelConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + prompts: config.prompts.map(prompt => + prompt.id === promptId ? {...prompt, [field]: value} : prompt + ) + }; + } + return config; + }); + setModelConfigs(newConfigs); + }; + + const handleDeletePrompt = (modelId, promptId) => { + const newConfigs = modelConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + prompts: config.prompts.filter(prompt => prompt.id !== promptId) + }; + } + return config; + }); + setModelConfigs(newConfigs); + }; + + const openSavePromptDialogHandler = (modelId, promptId) => { + setPromptToSave({modelId, promptId}); + setPromptNameToSave(''); + setOpenSavePromptDialog(true); + }; + + const savePrompt = () => { + if (promptNameToSave) { + let promptContent; + if (useGlobalPrompt) { + promptContent = {systemPrompt: globalSystemPrompt, userPrompt: globalUserPrompt}; + } else if (promptToSave) { + const {modelId, promptId} = promptToSave; + const model = modelConfigs.find(m => m.id === modelId); + const prompt = model.prompts.find(p => p.id === promptId); + promptContent = {systemPrompt: prompt.systemPrompt, userPrompt: prompt.userPrompt}; + } + const newSavedPrompts = [...savedPrompts, {name: promptNameToSave, content: promptContent}]; + setSavedPrompts(newSavedPrompts); + localStorage.setItem('savedPrompts', JSON.stringify(newSavedPrompts)); + setOpenSavePromptDialog(false); + } + }; + + const loadPrompt = (savedPrompt) => { + if (useGlobalPrompt) { + setGlobalSystemPrompt(savedPrompt.content.systemPrompt); + setGlobalUserPrompt(savedPrompt.content.userPrompt); + } else { + const newConfigs = modelConfigs.map(config => ({ + ...config, + prompts: config.prompts.map(prompt => ({ + ...prompt, + systemPrompt: savedPrompt.content.systemPrompt, + userPrompt: savedPrompt.content.userPrompt + })) + })); + setModelConfigs(newConfigs); + } + }; + + const removeSavedPrompt = (index) => { + const newSavedPrompts = savedPrompts.filter((_, i) => i !== index); + setSavedPrompts(newSavedPrompts); + localStorage.setItem('savedPrompts', JSON.stringify(newSavedPrompts)); + }; + + const openSaveModelDialogHandler = (model) => { + setModelToSave(model); + setModelNameToSave(''); + setOpenSaveModelDialog(true); + }; + + const saveModel = () => { + if (modelNameToSave && modelToSave) { + const modelToSaveWithoutId = {...modelToSave, id: undefined}; + const newSavedModels = [...savedModels, {name: modelNameToSave, config: modelToSaveWithoutId}]; + setSavedModels(newSavedModels); + localStorage.setItem('savedModels', JSON.stringify(newSavedModels)); + setOpenSaveModelDialog(false); + } + }; + + const loadModel = (savedModel, modelId) => { + const newConfigs = modelConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + ...savedModel.config, + id: config.id, + prompts: config.prompts + }; + } + return config; + }); + setModelConfigs(newConfigs); + }; + + const removeSavedModel = (index) => { + const newSavedModels = savedModels.filter((_, i) => i !== index); + setSavedModels(newSavedModels); + localStorage.setItem('savedModels', JSON.stringify(newSavedModels)); + }; + + const openSaveVariablesDialogHandler = () => { + setVariablesNameToSave(''); + setOpenSaveVariablesDialog(true); + }; + + const saveVariables = () => { + if (variablesNameToSave) { + const newSavedVariables = [...savedVariables, {name: variablesNameToSave, variables: variables}]; + setSavedVariables(newSavedVariables); + localStorage.setItem('savedVariables', JSON.stringify(newSavedVariables)); + setOpenSaveVariablesDialog(false); + } + }; + + const loadVariables = (savedVariableSet) => { + setVariables(savedVariableSet.variables); + }; + + const removeSavedVariables = (index) => { + const newSavedVariables = savedVariables.filter((_, i) => i !== index); + setSavedVariables(newSavedVariables); + localStorage.setItem('savedVariables', JSON.stringify(newSavedVariables)); + }; + + const toggleGlobalPrompt = () => { + setUseGlobalPrompt(!useGlobalPrompt); + }; + + const runPrompt = async (modelId, promptId) => { const model = modelConfigs.find(m => m.id === modelId); const prompt = model.prompts.find(p => p.id === promptId); - promptContent = { systemPrompt: prompt.systemPrompt, userPrompt: prompt.userPrompt }; - } - const newSavedPrompts = [...savedPrompts, { name: promptNameToSave, content: promptContent }]; - setSavedPrompts(newSavedPrompts); - localStorage.setItem('savedPrompts', JSON.stringify(newSavedPrompts)); - setOpenSavePromptDialog(false); - } - }; - - const loadPrompt = (savedPrompt) => { - if (useGlobalPrompt) { - setGlobalSystemPrompt(savedPrompt.content.systemPrompt); - setGlobalUserPrompt(savedPrompt.content.userPrompt); - } else { - const newConfigs = modelConfigs.map(config => ({ - ...config, - prompts: config.prompts.map(prompt => ({ - ...prompt, - systemPrompt: savedPrompt.content.systemPrompt, - userPrompt: savedPrompt.content.userPrompt - })) - })); - setModelConfigs(newConfigs); - } - }; - - const removeSavedPrompt = (index) => { - const newSavedPrompts = savedPrompts.filter((_, i) => i !== index); - setSavedPrompts(newSavedPrompts); - localStorage.setItem('savedPrompts', JSON.stringify(newSavedPrompts)); - }; - - const openSaveModelDialogHandler = (model) => { - setModelToSave(model); - setModelNameToSave(''); - setOpenSaveModelDialog(true); - }; - - const saveModel = () => { - if (modelNameToSave && modelToSave) { - const modelToSaveWithoutId = {...modelToSave, id: undefined}; - const newSavedModels = [...savedModels, { name: modelNameToSave, config: modelToSaveWithoutId }]; - setSavedModels(newSavedModels); - localStorage.setItem('savedModels', JSON.stringify(newSavedModels)); - setOpenSaveModelDialog(false); - } - }; - - const loadModel = (savedModel, modelId) => { - const newConfigs = modelConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - ...savedModel.config, - id: config.id, - prompts: config.prompts - }; - } - return config; - }); - setModelConfigs(newConfigs); - }; - - const removeSavedModel = (index) => { - const newSavedModels = savedModels.filter((_, i) => i !== index); - setSavedModels(newSavedModels); - localStorage.setItem('savedModels', JSON.stringify(newSavedModels)); - }; - - const openSaveVariablesDialogHandler = () => { - setVariablesNameToSave(''); - setOpenSaveVariablesDialog(true); - }; - - const saveVariables = () => { - if (variablesNameToSave) { - const newSavedVariables = [...savedVariables, { name: variablesNameToSave, variables: variables }]; - setSavedVariables(newSavedVariables); - localStorage.setItem('savedVariables', JSON.stringify(newSavedVariables)); - setOpenSaveVariablesDialog(false); - } - }; - - const loadVariables = (savedVariableSet) => { - setVariables(savedVariableSet.variables); - }; - - const removeSavedVariables = (index) => { - const newSavedVariables = savedVariables.filter((_, i) => i !== index); - setSavedVariables(newSavedVariables); - localStorage.setItem('savedVariables', JSON.stringify(newSavedVariables)); - }; - - const toggleGlobalPrompt = () => { - setUseGlobalPrompt(!useGlobalPrompt); - }; - - const runPrompt = async (modelId, promptId) => { - const model = modelConfigs.find(m => m.id === modelId); - const prompt = model.prompts.find(p => p.id === promptId); - let processedSystemPrompt = useGlobalPrompt ? globalSystemPrompt : prompt.systemPrompt; - let processedUserPrompt = useGlobalPrompt ? globalUserPrompt : prompt.userPrompt; - variables.forEach(v => { - const regex = new RegExp(`\\{${v.name}\\}`, 'g'); - processedSystemPrompt = processedSystemPrompt.replace(regex, v.value); - processedUserPrompt = processedUserPrompt.replace(regex, v.value); - }); - - try { - let response; - if (model.provider === 'openai') { - response = await axios.post(model.endpoint, { - model: model.model, - messages: [ - { role: 'system', content: processedSystemPrompt }, - { role: 'user', content: processedUserPrompt } - ], - temperature: model.temperature, - max_tokens: model.maxTokens, - }, { - headers: { 'Authorization': `Bearer ${model.apiKey}` } + let processedSystemPrompt = useGlobalPrompt ? globalSystemPrompt : prompt.systemPrompt; + let processedUserPrompt = useGlobalPrompt ? globalUserPrompt : prompt.userPrompt; + variables.forEach(v => { + const regex = new RegExp(`\\{${v.name}\\}`, 'g'); + processedSystemPrompt = processedSystemPrompt.replace(regex, v.value); + processedUserPrompt = processedUserPrompt.replace(regex, v.value); }); - const output = response.data.choices[0].message.content; - setModelConfigs(prevConfigs => prevConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - prompts: config.prompts.map(p => - p.id === promptId ? {...p, output} : p - ) - }; - } - return config; - })); - } else if (model.provider === 'anthropic') { - // Implement Anthropic API call here - } - } catch (error) { - console.error('Error calling API:', error); - const errorOutput = `Error: ${error.message}`; - setModelConfigs(prevConfigs => prevConfigs.map(config => { - if (config.id === modelId) { - return { - ...config, - prompts: config.prompts.map(p => - p.id === promptId ? {...p, output: errorOutput} : p - ) - }; + + try { + let response; + if (model.provider === 'openai' || model.provider === 'llamaedge') { + response = await axios.post(model.endpoint, { + model: model.model, + messages: [ + {role: 'system', content: processedSystemPrompt}, + {role: 'user', content: processedUserPrompt} + ], + temperature: model.temperature, + max_tokens: model.maxTokens, + }, { + headers: {'Authorization': `Bearer ${model.apiKey}`} + }); + const output = response.data.choices[0].message.content; + setModelConfigs(prevConfigs => prevConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + prompts: config.prompts.map(p => + p.id === promptId ? {...p, output} : p + ) + }; + } + return config; + })); + } else if (model.provider === 'anthropic') { + // Implement Anthropic API call here + } + } catch (error) { + console.error('Error calling API:', error); + const errorOutput = `Error: ${error.message}`; + setModelConfigs(prevConfigs => prevConfigs.map(config => { + if (config.id === modelId) { + return { + ...config, + prompts: config.prompts.map(p => + p.id === promptId ? {...p, output: errorOutput} : p + ) + }; + } + return config; + })); } - return config; - })); - } - }; + }; - const runAllPrompts = async () => { - for (const config of modelConfigs) { - for (const prompt of config.prompts) { - await runPrompt(config.id, prompt.id); - } - } - }; - - return ( - - Prompt Engineering Tool - - - - Saved Prompts - - {savedPrompts.map((savedPrompt, index) => ( - - - removeSavedPrompt(index)}> - - ))} - - - - - - - - } - label="Use Global Prompt" - /> - {useGlobalPrompt && ( - <> - setGlobalSystemPrompt(e.target.value)} - variant="outlined" - sx={{ mt: 2, mb: 2 }} - /> - setGlobalUserPrompt(e.target.value)} - variant="outlined" - sx={{ mb: 2 }} - /> - - )} - - - - - - - {modelConfigs.map((config) => ( - - - - Model - - - {!useGlobalPrompt && ( - <> - {config.prompts.map((prompt) => ( - - handlePromptChange(config.id, prompt.id, 'systemPrompt', e.target.value)} - variant="outlined" - sx={{ mb: 2 }} - /> - handlePromptChange(config.id, prompt.id, 'userPrompt', e.target.value)} - variant="outlined" - sx={{ mb: 2 }} + const runAllPrompts = async () => { + for (const config of modelConfigs) { + for (const prompt of config.prompts) { + await runPrompt(config.id, prompt.id); + } + } + }; + + return ( + + Prompt Engineering Tool + + + + Saved Prompts + + {savedPrompts.map((savedPrompt, index) => ( + + + removeSavedPrompt(index)}> + + ))} + + + + + + + + } + label="Use Global Prompt" /> - - - + {useGlobalPrompt && ( + <> + setGlobalSystemPrompt(e.target.value)} + variant="outlined" + sx={{mt: 2, mb: 2}} + /> + setGlobalUserPrompt(e.target.value)} + variant="outlined" + sx={{mb: 2}} + /> + + )} + + + - - + + + + + + ))} + + + )} + {useGlobalPrompt && ( + + )} + + + ))} + + + - - ))} - - - )} - {useGlobalPrompt && ( - + + + + + + + Variables + + {variables.map((variable, index) => ( + + + handleVariableChange(index, 'name', e.target.value)} + sx={{mb: 1}} + /> + handleVariableChange(index, 'value', e.target.value)} + /> + handleDeleteVariable(index)} + sx={{position: 'absolute', top: 0, right: 0}} + > + + + + + ))} + + + + + + + + Saved Variables + + {savedVariables.map((savedVarSet, index) => ( + + + removeSavedVariables(index)}> + + ))} + + + + Model Configurations + {modelConfigs.map((config) => ( + + + Provider + + + { + ProviderCanQueryModelList.includes(config.provider) ? <> + handleModelConfigChange(config.id, 'endpoint', e.target.value)} + /> + handleModelConfigChange(config.id, 'apiKey', e.target.value)} + type="password" + /> + + Model + + + : + handleModelConfigChange(config.id, 'model', e.target.value)} + /> + } + + { + !ProviderCanQueryModelList.includes(config.provider) ? <> + handleModelConfigChange(config.id, 'apiKey', e.target.value)} + type="password" + /> + handleModelConfigChange(config.id, 'endpoint', e.target.value)} + /> + : "" + } + handleModelConfigChange(config.id, 'maxTokens', parseInt(e.target.value))} + /> + Temperature: {config.temperature} + handleModelConfigChange(config.id, 'temperature', newValue)} + min={0} max={1} step={0.1} + /> + + + + + + ))} + + + + + setOpenSavePromptDialog(false)}> + Save Prompt + + - )} - - - ))} - - - - - - - - - - - Variables - - {variables.map((variable, index) => ( - - - setPromptNameToSave(e.target.value)} + /> + + + + + + + setOpenSaveModelDialog(false)}> + Save Model Configuration + + handleVariableChange(index, 'name', e.target.value)} - sx={{ mb: 1 }} - /> - setModelNameToSave(e.target.value)} + /> + + + + + + + setOpenSaveVariablesDialog(false)}> + Save Variables + + handleVariableChange(index, 'value', e.target.value)} - /> - handleDeleteVariable(index)} - sx={{ position: 'absolute', top: 0, right: 0 }} - > - - - - - ))} - - - - - - - - Saved Variables - - {savedVariables.map((savedVarSet, index) => ( - - - removeSavedVariables(index)}> - - ))} - - - - Model Configurations - {modelConfigs.map((config) => ( - - - Provider - - - handleModelConfigChange(config.id, 'model', e.target.value)} - /> - handleModelConfigChange(config.id, 'apiKey', e.target.value)} - type="password" - /> - handleModelConfigChange(config.id, 'endpoint', e.target.value)} - /> - handleModelConfigChange(config.id, 'maxTokens', parseInt(e.target.value))} - /> - Temperature: {config.temperature} - handleModelConfigChange(config.id, 'temperature', newValue)} - min={0} max={1} step={0.1} - /> - - - - - - ))} - - - - - setOpenSavePromptDialog(false)}> - Save Prompt - - setPromptNameToSave(e.target.value)} - /> - - - - - - - setOpenSaveModelDialog(false)}> - Save Model Configuration - - setModelNameToSave(e.target.value)} - /> - - - - - - - setOpenSaveVariablesDialog(false)}> - Save Variables - - setVariablesNameToSave(e.target.value)} - /> - - - - - - - - ); + variant="standard" + value={variablesNameToSave} + onChange={(e) => setVariablesNameToSave(e.target.value)} + /> + + + + + + + + ); } export default App; \ No newline at end of file From f9f9b18e86653de405ee39ad3a8fac837b14eafa Mon Sep 17 00:00:00 2001 From: JYC0413 Date: Tue, 13 Aug 2024 18:32:42 +0800 Subject: [PATCH 2/5] Create nextjs.yml --- .github/workflows/nextjs.yml | 93 ++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 .github/workflows/nextjs.yml diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml new file mode 100644 index 0000000..ed74736 --- /dev/null +++ b/.github/workflows/nextjs.yml @@ -0,0 +1,93 @@ +# Sample workflow for building and deploying a Next.js site to GitHub Pages +# +# To get started with Next.js see: https://nextjs.org/docs/getting-started +# +name: Deploy Next.js site to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Detect package manager + id: detect-package-manager + run: | + if [ -f "${{ github.workspace }}/yarn.lock" ]; then + echo "manager=yarn" >> $GITHUB_OUTPUT + echo "command=install" >> $GITHUB_OUTPUT + echo "runner=yarn" >> $GITHUB_OUTPUT + exit 0 + elif [ -f "${{ github.workspace }}/package.json" ]; then + echo "manager=npm" >> $GITHUB_OUTPUT + echo "command=ci" >> $GITHUB_OUTPUT + echo "runner=npx --no-install" >> $GITHUB_OUTPUT + exit 0 + else + echo "Unable to determine package manager" + exit 1 + fi + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: ${{ steps.detect-package-manager.outputs.manager }} + - name: Setup Pages + uses: actions/configure-pages@v5 + with: + # Automatically inject basePath in your Next.js configuration file and disable + # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). + # + # You may remove this line if you want to manage the configuration yourself. + static_site_generator: next + - name: Restore cache + uses: actions/cache@v4 + with: + path: | + .next/cache + # Generate a new cache whenever packages or source files change. + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} + # If source files changed but packages didn't, rebuild from a prior cache. + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- + - name: Install dependencies + run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} + - name: Build with Next.js + run: ${{ steps.detect-package-manager.outputs.runner }} next build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./out + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 From 8eedbc5624c2bfa3cdf53d4bc9ff11f5a987a8d0 Mon Sep 17 00:00:00 2001 From: JYC0413 Date: Tue, 13 Aug 2024 18:41:29 +0800 Subject: [PATCH 3/5] Update and rename nextjs.yml to react.yml --- .github/workflows/nextjs.yml | 93 ------------------------------------ .github/workflows/react.yml | 31 ++++++++++++ 2 files changed, 31 insertions(+), 93 deletions(-) delete mode 100644 .github/workflows/nextjs.yml create mode 100644 .github/workflows/react.yml diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml deleted file mode 100644 index ed74736..0000000 --- a/.github/workflows/nextjs.yml +++ /dev/null @@ -1,93 +0,0 @@ -# Sample workflow for building and deploying a Next.js site to GitHub Pages -# -# To get started with Next.js see: https://nextjs.org/docs/getting-started -# -name: Deploy Next.js site to Pages - -on: - # Runs on pushes targeting the default branch - push: - branches: ["main"] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: - -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages -permissions: - contents: read - pages: write - id-token: write - -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. -concurrency: - group: "pages" - cancel-in-progress: false - -jobs: - # Build job - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Detect package manager - id: detect-package-manager - run: | - if [ -f "${{ github.workspace }}/yarn.lock" ]; then - echo "manager=yarn" >> $GITHUB_OUTPUT - echo "command=install" >> $GITHUB_OUTPUT - echo "runner=yarn" >> $GITHUB_OUTPUT - exit 0 - elif [ -f "${{ github.workspace }}/package.json" ]; then - echo "manager=npm" >> $GITHUB_OUTPUT - echo "command=ci" >> $GITHUB_OUTPUT - echo "runner=npx --no-install" >> $GITHUB_OUTPUT - exit 0 - else - echo "Unable to determine package manager" - exit 1 - fi - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version: "20" - cache: ${{ steps.detect-package-manager.outputs.manager }} - - name: Setup Pages - uses: actions/configure-pages@v5 - with: - # Automatically inject basePath in your Next.js configuration file and disable - # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized). - # - # You may remove this line if you want to manage the configuration yourself. - static_site_generator: next - - name: Restore cache - uses: actions/cache@v4 - with: - path: | - .next/cache - # Generate a new cache whenever packages or source files change. - key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} - # If source files changed but packages didn't, rebuild from a prior cache. - restore-keys: | - ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}- - - name: Install dependencies - run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} - - name: Build with Next.js - run: ${{ steps.detect-package-manager.outputs.runner }} next build - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: ./out - - # Deployment job - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest - needs: build - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml new file mode 100644 index 0000000..0c329bd --- /dev/null +++ b/.github/workflows/react.yml @@ -0,0 +1,31 @@ +name: Deploy React App + +on: + push: + branches: + - main # 监听 main 分支的 push 事件 + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + + steps: + - name: Checkout the code + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: '16' + + - name: Install dependencies + run: npm install + + - name: Build the React app + run: npm run build + + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./build From 1d95eaa7e6eeeaaa03c4f9f23111fd74c2ba9ceb Mon Sep 17 00:00:00 2001 From: JYC0413 Date: Tue, 13 Aug 2024 18:43:59 +0800 Subject: [PATCH 4/5] Update react.yml --- .github/workflows/react.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml index 0c329bd..6eb2654 100644 --- a/.github/workflows/react.yml +++ b/.github/workflows/react.yml @@ -19,10 +19,10 @@ jobs: node-version: '16' - name: Install dependencies - run: npm install + run: yarn - name: Build the React app - run: npm run build + run: yarn build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 From 02d6cca3ef2f261f7e819ad6214b2bf156734b5b Mon Sep 17 00:00:00 2001 From: JYC0413 Date: Tue, 13 Aug 2024 18:49:03 +0800 Subject: [PATCH 5/5] fix --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 6b38ae6..5f3ad2d 100644 --- a/src/App.js +++ b/src/App.js @@ -291,7 +291,6 @@ function App() { const runPrompt = async (modelId, promptId) => { const model = modelConfigs.find(m => m.id === modelId); - const prompt = model.prompts.find(p => p.id === promptId); let messages = []; if (promptId === model.prompts[0].id && useGlobalPrompt) {