WIP setting config api server

Bura56 · Jan 17, 2024 · 53cb96c · 53cb96c
1 parent 1ccbcc6
commit 53cb96c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 11 deletions.
diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
@@ -1,7 +1,7 @@
 .btn {
   @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
   @apply cursor-pointer focus:outline-none focus-visible:outline-none focus-visible:ring-0;
-  @apply disabled:pointer-events-none disabled:opacity-50;
+  @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
 
   &-primary {
     @apply bg-primary hover:bg-primary/90 text-white;

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
@@ -29,6 +29,8 @@ import ModelLabel from '../ModelLabel'
 
 import OpenAiKeyInput from '../OpenAiKeyInput'
 
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+import { totalRamAtom, usedRamAtom } from '@/helpers/atoms/SystemBar.atom'
 import {
   ModelParams,
   activeThreadAtom,
@@ -45,6 +47,8 @@ export default function DropdownListSidebar() {
   const threadStates = useAtomValue(threadStatesAtom)
   const [selectedModel, setSelectedModel] = useAtom(selectedModelAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
+  const { activeModel, startModel } = useActiveModel()
+  const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
 
   const { setMainViewState } = useMainViewState()
   const [openAISettings, setOpenAISettings] = useState<
@@ -109,6 +113,15 @@ export default function DropdownListSidebar() {
       const model = downloadedModels.find((m) => m.id === modelId)
       setSelectedModel(model)
 
+      if (activeModel?.id !== modelId) {
+        startModel(modelId)
+      }
+
+      if (serverEnabled) {
+        window.core?.api?.stopServer()
+        setServerEnabled(false)
+      }
+
       if (activeThreadId) {
         const modelParams = {
           ...model?.parameters,
@@ -117,7 +130,14 @@ export default function DropdownListSidebar() {
         setThreadModelParams(activeThreadId, modelParams)
       }
     },
-    [downloadedModels, activeThreadId, setSelectedModel, setThreadModelParams]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      downloadedModels,
+      serverEnabled,
+      activeThreadId,
+      setSelectedModel,
+      setThreadModelParams,
+    ]
   )
 
   if (!activeThread) {

diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 
 import {
   Button,
@@ -18,7 +18,7 @@ import {
   SelectValue,
 } from '@janhq/uikit'
 
-import { useAtom, useAtomValue } from 'jotai'
+import { atom, useAtom, useAtomValue } from 'jotai'
 
 import { Paintbrush, CodeIcon } from 'lucide-react'
 import { ExternalLinkIcon, InfoIcon } from 'lucide-react'
@@ -47,6 +47,11 @@ import Logs from './Logs'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
 
+const corsEnabledAtom = atom(true)
+const verboseEnabledAtom = atom(true)
+const hostAtom = atom('127.0.0.1')
+const portAtom = atom('1337')
+
 const LocalServerScreen = () => {
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
   const showing = useAtomValue(showRightSideBarAtom)
@@ -57,10 +62,14 @@ const LocalServerScreen = () => {
   const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
   const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams)
   const { openServerLog, clearServerLog } = useServerLog()
-  const { activeModel, startModel } = useActiveModel()
-
+  const { activeModel, startModel, stateModel } = useActiveModel()
   const [selectedModel] = useAtom(selectedModelAtom)
 
+  const [isCorsEnabled, setIsCorsEnabled] = useAtom(corsEnabledAtom)
+  const [isVerboseEnabled, setIsVerboseEnabled] = useAtom(verboseEnabledAtom)
+  const [host, setHost] = useAtom(hostAtom)
+  const [port, setPort] = useAtom(portAtom)
+
   return (
     <div className="flex h-full w-full">
       {/* Left SideBar */}
@@ -76,6 +85,7 @@ const LocalServerScreen = () => {
             <Button
               block
               themes={serverEnabled ? 'danger' : 'success'}
+              disabled={stateModel.loading}
               onClick={() => {
                 if (serverEnabled) {
                   window.core?.api?.stopServer()
@@ -84,7 +94,12 @@ const LocalServerScreen = () => {
                   if (!activeModel) {
                     startModel(String(selectedModel?.id))
                   }
-                  window.core?.api?.startServer()
+                  window.core?.api?.startServer(
+                    host,
+                    port,
+                    isCorsEnabled,
+                    isVerboseEnabled
+                  )
                   setServerEnabled(true)
                 }
               }}
@@ -101,7 +116,11 @@ const LocalServerScreen = () => {
 
         <div className="space-y-4 p-4">
           <div className="flex w-full flex-shrink-0 items-center gap-x-2">
-            <Select value="127.0.0.1" onValueChange={(e) => console.log(e)}>
+            <Select
+              value={host}
+              onValueChange={(e) => setHost(e)}
+              disabled={serverEnabled}
+            >
               <SelectTrigger className="w-full">
                 <SelectValue />
               </SelectTrigger>
@@ -113,7 +132,9 @@ const LocalServerScreen = () => {
 
             <Input
               className="w-[60px] flex-shrink-0"
-              value="1337"
+              value={port}
+              onChange={(e) => setPort(e.target.value)}
+              maxLength={4}
               disabled={serverEnabled}
             />
           </div>
@@ -144,7 +165,12 @@ const LocalServerScreen = () => {
               </Tooltip>
             </label>
             <div className="flex items-center justify-between">
-              <Switch name="cors" />
+              <Switch
+                checked={isCorsEnabled}
+                onCheckedChange={(e) => setIsCorsEnabled(e)}
+                name="cors"
+                disabled={serverEnabled}
+              />
             </div>
           </div>
           <div>
@@ -174,7 +200,12 @@ const LocalServerScreen = () => {
               </Tooltip>
             </label>
             <div className="flex items-center justify-between">
-              <Switch name="verbose" />
+              <Switch
+                checked={isVerboseEnabled}
+                onCheckedChange={(e) => setIsVerboseEnabled(e)}
+                name="verbose"
+                disabled={serverEnabled}
+              />
             </div>
           </div>
         </div>