Merge pull request #31 from SkywardAI/aws-credentials

Invoke AWS Bedrock

README.md

@@ -1,5 +1,5 @@
 # Shibuya
-[![Lint code](https://github.com/SkywardAI/shibuya/actions/workflows/lint.yml/badge.svg)](https://github.com/SkywardAI/shibuya/actions/workflows/lint.yml)  
+[![Lint code](https://github.com/SkywardAI/shibuya/actions/workflows/lint.yml/badge.svg)](https://github.com/SkywardAI/shibuya/actions/workflows/lint.yml) [![Release Distribution](https://github.com/SkywardAI/shibuya/actions/workflows/distribution.yml/badge.svg)](https://github.com/SkywardAI/shibuya/actions/workflows/distribution.yml)  
 A project built Electron + React.js, to dig out the potential of cross platform AI completion.
 
 ## Development Build
@@ -22,6 +22,12 @@ And
 pnpm run electron
 ```
 One on each terminal, so they won't conflict with each other.
+
+## Distributions
+There are some distribution files in releast page. Please download and run `SkywardaiChat-vX.Y.Z.(AppImage|dmg|exe)` according to your platform.  
+Currently there's no `Code Signing` in our distributions, so your defender might block you from using the application. Please allow install to use the distributions.  
+
+> Sensitive informations are stored only at your own machine. No one can see them.
+
 ## References
 * [Wllama](https://github.com/ngxson/wllama)
-* [Voy](https://github.com/tantaraio/voy)

electron.js

@@ -12,7 +12,7 @@ function createWindow() {
         width: 900,
         minWidth: 560,
         minHeight: 250,
-        // autoHideMenuBar: true,
+        autoHideMenuBar: true,
     })
 
     if(app.isPackaged) {

package.json

@@ -4,7 +4,7 @@
       "name": "Bohan Cheng",
       "email": "[email protected]"
   },
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "electron.js",
   "scripts": {
     "dev": "npm run start & npm run electron",

src/components/Entry.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useIDB from '../utils/idb'
 import { downloadModel, isModelDownloaded, loadModel } from '../utils/workers/worker'
-import { getPlatformSettings } from '../utils/platform_settings';
+import { getPlatformSettings } from '../utils/general_settings';
 
 export default function Entry({complete}) {
 

src/components/chat/Conversation.jsx

@@ -89,7 +89,8 @@ export default function Conversation({ uid }) {
             if(upload_file) {
                 const is_img = upload_file.type.startsWith('image')
                 const file_obj = {
-                    content: new Uint8Array(await upload_file.arrayBuffer())
+                    content: new Uint8Array(await upload_file.arrayBuffer()),
+                    format: upload_file.name.split('.').pop().toLowerCase()
                 }
                 if(!is_img) file_obj.name = upload_file.name;
                 user_message[

src/components/settings/AwsSettings.jsx

@@ -4,13 +4,15 @@ import SettingSection from "./SettingSection";
 import TextComponent from "./components/TextComponent";
 import PasswordComponent from "./components/PasswordComponent";
 import { getJSONCredentials, storeCredentials } from "../../utils/workers/aws-worker";
-import { getPlatformSettings } from "../../utils/platform_settings";
+import { getPlatformSettings } from "../../utils/general_settings";
 
-export default function AwsSettings({ platform_setting, updatePlatformSetting }) {
+export default function AwsSettings({ trigger, platform_setting, updatePlatformSetting }) {
 
     const [ aws_enabled, setAwsEnabled ] = useState(false);
     const [ aws_region, setAwsRegion ] = useState('');
-    const [ aws_pool_id, setAwsPoolId ] = useState('');
+    const [ aws_key_id, setAwsKeyID ] = useState('');
+    const [ aws_secret_key, setAwsSecretKey ] = useState('');
+    const [ aws_session_token, setAwsSessionToken ] = useState('');
     const [ aws_model_id, setAwsModelID ] = useState('');
 
     function setEnabled(is_enabled) {
@@ -26,12 +28,18 @@ export default function AwsSettings({ platform_setting, updatePlatformSetting })
     }
 
     function saveSettings() {
+        const credentials = {
+            key_id: aws_key_id, secret_key: aws_secret_key
+        }
+        if(aws_session_token) {
+            credentials.session_token = aws_session_token
+        }
         storeCredentials(
-            aws_region, aws_pool_id,
+            credentials, aws_key_id && aws_secret_key,
             platform_setting.enabled_platform === 'AWS'
         )
         updatePlatformSetting({
-            aws_model_id
+            aws_model_id, aws_region
         })
     }
 
@@ -41,35 +49,54 @@ export default function AwsSettings({ platform_setting, updatePlatformSetting })
             const credentials = await getJSONCredentials();
 
             if(credentials) {
-                setAwsRegion(credentials.region);
-                setAwsPoolId(credentials.pool_id);
+                setAwsKeyID(credentials.key_id);
+                setAwsSecretKey(credentials.secret_key);
+                setAwsSessionToken(credentials.session_token);
             }
 
-            const { aws_model_id: model_id } = getPlatformSettings();
+            const { aws_model_id: model_id, aws_region: region } = getPlatformSettings();
             setAwsModelID(model_id);
+            setAwsRegion(region);
         })()
     }, [])
 
     useEffect(()=>{
         setAwsEnabled(platform_setting.enabled_platform === 'AWS');
     }, [platform_setting])
 
+    useEffect(()=>{
+        trigger && saveSettings();
+    // eslint-disable-next-line
+    }, [trigger])
+
     return (
         <SettingSection title={'AWS Bedrock Settings'}>
             <TrueFalseComponent 
                 title={"Use AWS Bedrock For Completion"}
                 value={aws_enabled} cb={setEnabled}
             />
-            <TextComponent 
-                title={"Set AWS Region"}
-                value={aws_region} cb={setAwsRegion}
-                description={'Please input your region of Bedrock & Gonginto Identity Pool.'}
+            <PasswordComponent 
+                title={"Set Access Key ID"}
+                value={aws_key_id} cb={setAwsKeyID}
+                description={'Please input your AWS Access Key ID.'}
                 disabled={!aws_enabled}
             />
             <PasswordComponent 
-                title={"Set Cognito Identity Pool ID"}
-                value={aws_pool_id} cb={setAwsPoolId}
-                description={'Please input your AWS Gonginto Identity Pool ID.'}
+                title={"Set Secret Access Key"}
+                value={aws_secret_key} cb={setAwsSecretKey}
+                description={'Please input your AWS Secret Access Key.'}
+                disabled={!aws_enabled}
+            />
+            <PasswordComponent 
+                title={"Set Session Token"}
+                value={aws_session_token} cb={setAwsSessionToken}
+                description={'Please input your AWS Session Token.'}
+                disabled={!aws_enabled}
+            />
+            <TextComponent 
+                title={"Set AWS Region"}
+                value={aws_region} cb={setAwsRegion}
+                description={'Please input your AWS Bedrock Region.'}
                 disabled={!aws_enabled}
             />
             <TextComponent 
@@ -78,7 +105,6 @@ export default function AwsSettings({ platform_setting, updatePlatformSetting })
                 description={'Please input the Redrock Model ID you want to use.'}
                 disabled={!aws_enabled}
             />
-            <div onClick={saveSettings}>save settings</div>
         </SettingSection>
     )
 }

src/components/settings/ModelSettings.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import ScrollBarComponent from "./components/ScrollBarComponent";
+import SettingSection from "./SettingSection";
+import { getModelSettings, updateModelSettings } from "../../utils/general_settings";
+
+export default function ModelSettings({ trigger }) {
+
+    const [max_tokens, setMaxTokens] = useState(0);
+    const [top_p, setTopP] = useState(0);
+    const [temperature, setTemperature] = useState(0);
+
+    function saveSettings() {
+        updateModelSettings({
+            max_tokens, top_p, temperature
+        })
+    }
+
+    useEffect(()=>{
+        trigger && saveSettings();
+    // eslint-disable-next-line
+    }, [trigger])
+
+    useEffect(()=>{
+        const model_settings = getModelSettings();
+        setMaxTokens(model_settings.max_tokens);
+        setTopP(model_settings.top_p);
+        setTemperature(model_settings.temperature);
+    }, [])
+
+    return (
+        <SettingSection title={'General Model Settings'}>
+            <ScrollBarComponent
+                title={'Set Max Tokens'}
+                description={'The max tokens AI can generate'}
+                value={max_tokens} cb={setMaxTokens}
+                max={2048} min={32}
+            />
+            <ScrollBarComponent
+                title={'Set Top P'}
+                description={'This can be considered the general accuracy of AI response'}
+                value={top_p} cb={setTopP}
+                max={1} min={0} times_10={true}
+            />
+            <ScrollBarComponent
+                title={'Set Temperature'}
+                description={'The higher temperature, the more creative AI\'s response is.'}
+                value={temperature} cb={setTemperature}
+                max={1} min={0} times_10={true}
+            />
+        </SettingSection>
+    )
+}

src/components/settings/components/ScrollBarComponent.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react"
+
+export default function ScrollBarComponent({ cb, value, disabled, title, description, min, max, times_10, step }) {
+
+    const [scrollValue, setScrollValue] = useState((times_10 ? 10 : 1) * value);
+    const [textValue, setTextValue] = useState(value);
+
+    function checkValue(v) {
+        v = v || +textValue;
+        return v <= max && v >= min;
+    }
+
+    function setValue(value, is_scroll = false) {
+        if(is_scroll) {
+            setTextValue(times_10 ? value / 10 : value);
+            setScrollValue(value);
+        } else {
+            if(!isNaN(+value)) {
+                setScrollValue(times_10 ? value * 10 : value);
+            }
+            setTextValue(value);
+        }
+    }
+
+    useEffect(()=>{
+        !isNaN(+textValue) && checkValue() && cb(textValue);
+    // eslint-disable-next-line
+    }, [textValue])
+
+    useEffect(()=>{
+        setScrollValue((times_10 ? 10 : 1) * value)
+        setTextValue(value);
+    // eslint-disable-next-line
+    }, [value])
+
+
+    return (
+        <div className="component">
+            <div className="title">{title}</div>
+            { description && <div className="description">{description}</div> }
+            <div className="main-part scroll-group">
+                <input 
+                    type="range" onChange={evt=>setValue(evt.target.value, true)}
+                    step={step || 1} value={scrollValue}
+                    min={(times_10 ? 10 : 1) * min} max={(times_10 ? 10 : 1) * max} 
+                    disabled={disabled} 
+                />
+                <input type="text" value={textValue} onInput={evt=>setValue(evt.target.value, false)} />
+            </div>
+        </div>
+    )
+}

src/components/settings/components/TrueFalseComponent.jsx

@@ -3,8 +3,12 @@ export default function TrueFalseComponent({ cb, value, title, description }) {
         <div className="component">
             <div className="title">{title}</div>
             { description && <div className="description">{description}</div> }
-            <div className="checkbox-container main-part">
-                <input className="clickable" type="checkbox" checked={value} onChange={(evt)=>cb(evt.target.checked)} />
+            <div className="main-part checkbox">
+                <div className="text">OFF</div>
+                <div className="checkbox-container">
+                    <input className="clickable" type="checkbox" checked={value} onChange={(evt)=>cb(evt.target.checked)} />
+                </div>
+                <div className="text">ON</div>
             </div>
         </div>
     )

src/components/settings/index.jsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
 import AwsSettings from "./AwsSettings";
-import { getPlatformSettings, updatePlatformSettings as setStorageSetting } from "../../utils/platform_settings";
+import { getPlatformSettings, updatePlatformSettings as setStorageSetting } from "../../utils/general_settings";
+import ModelSettings from "./ModelSettings";
 
 export default function Settings() {
 
     const [platfom_settings, updatePlatformSettings] = useState(getPlatformSettings())
+    const [ saveSettingTrigger, toggleSaveSetting ] = useState(false);
 
     function updateSettings(settings) {
         const new_settings = {
@@ -15,12 +17,24 @@ export default function Settings() {
         setStorageSetting(new_settings);
     }
 
+    function save() {
+        toggleSaveSetting(true);
+        setTimeout(()=>toggleSaveSetting(false), 1000);
+    }
+
     return (
         <div className="setting-page">
+            <ModelSettings 
+                trigger={saveSettingTrigger}
+            />
             <AwsSettings 
+                trigger={saveSettingTrigger}
                 platform_setting={platfom_settings}
                 updatePlatformSetting={updateSettings}
             />
+            <div className={`save-settings clickable${saveSettingTrigger?" saved":""}`} onClick={save}>
+                { saveSettingTrigger ? "Settings Saved!" : "Save Settings" }
+            </div>
         </div>
     )
 }