file-based settings storage

app.py

@@ -5,6 +5,7 @@ from anthropic import Anthropic
 import json
 
 from doc2json import process_docx
+from settings_mgr import generate_download_settings_js, generate_upload_settings_js
 
 dump_controls = False
 log_to_console = False
@@ -187,12 +188,14 @@ with gr.Blocks() as demo:
     with gr.Accordion("Settings"):
         api_key = gr.Textbox(label="Anthropic API Key", elem_id="api_key")
         model = gr.Dropdown(label="Model", value="claude-3-opus-20240229", allow_custom_value=True, elem_id="model",
-                            choices=["claude-3-opus-20240229", "claude-3-sonnet-20240229", "claude-3-haiku-20240307"])
+                            choices=["claude-3-opus-20240229", "claude-3-sonnet-20240229", "claude-3-haiku-20240307", "claude-2.1", "claude-2.0", "claude-instant-1.2"])
         system_prompt = gr.TextArea("You are a helpful AI.", label="System Prompt", lines=3, max_lines=250, elem_id="system_prompt")  
         temp = gr.Slider(0, 1, label="Temperature", elem_id="temp", value=1)
         max_tokens = gr.Slider(1, 4000, label="Max. Tokens", elem_id="max_tokens", value=800)
         save_button = gr.Button("Save Settings")  
         load_button = gr.Button("Load Settings")  
+        dl_settings_button = gr.Button("Download Settings")
+        ul_settings_button = gr.Button("Upload Settings")
 
         load_button.click(load_settings, js="""  
             () => {  
@@ -216,6 +219,16 @@ with gr.Blocks() as demo:
             }  
         """) 
 
+        control_ids = [('api_key', '#api_key textarea'),
+                       ('system_prompt', '#system_prompt textarea'),
+                       ('temp', '#temp input'),
+                       ('max_tokens', '#max_tokens input'),
+                       ('model', '#model')]
+        controls = [api_key, system_prompt, temp, max_tokens, model]
+
+        dl_settings_button.click(None, controls, js=generate_download_settings_js("claude_chat_settings.bin", control_ids))
+        ul_settings_button.click(None, None, None, js=generate_upload_settings_js(control_ids))
+
     chatbot = gr.Chatbot(
         [],
         elem_id="chatbot",

settings_mgr.py

@@ -0,0 +1,85 @@
+def generate_download_settings_js(dl_fn, control_ids):
+    js_code = """
+    async (""" + ", ".join([f'{ctrl[0]}' for ctrl in control_ids]) + """) => {  
+        const password = prompt("Please enter a password for encryption", " ");
+        if (!password) {
+            alert("No password provided. Cancelling download.");
+            return;
+        }
+        
+        let settings = {""" + ", ".join([f'"{ctrl[0]}": {ctrl[0]}' for ctrl in control_ids]) + """};
+        const settingsStr = JSON.stringify(settings);
+        const textEncoder = new TextEncoder();
+        const encodedSettings = textEncoder.encode(settingsStr);
+        const salt = crypto.getRandomValues(new Uint8Array(16));
+        const passwordBuffer = textEncoder.encode(password);
+        const keyMaterial = await crypto.subtle.importKey('raw', passwordBuffer, {name: 'PBKDF2'}, false, ['deriveKey']);
+        const key = await crypto.subtle.deriveKey(
+            {name: 'PBKDF2', salt: salt, iterations: 100000, hash: 'SHA-256'}, 
+            keyMaterial, 
+            {name: 'AES-GCM', length: 256}, 
+            false, 
+            ['encrypt']
+        );
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const encryptedSettings = await crypto.subtle.encrypt({name: 'AES-GCM', iv: iv}, key, encodedSettings);
+        const blob = new Blob([salt, iv, new Uint8Array(encryptedSettings)], {type: 'application/octet-stream'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = '""" + dl_fn + """';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }"""
+    return js_code
+
+def generate_upload_settings_js(control_ids):
+    js_code = """
+    async () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.onchange = async e => {
+            const file = e.target.files[0];
+            if (!file) {
+                alert("No file selected.");
+                return;
+            }
+            
+            const password = prompt("Please enter the password for decryption", " ");
+            if (!password) {
+                alert("No password provided. Cancelling upload.");
+                return;
+            }
+            
+            const arrayBuffer = await file.arrayBuffer();
+            const salt = arrayBuffer.slice(0, 16);
+            const iv = arrayBuffer.slice(16, 28);
+            const encryptedData = arrayBuffer.slice(28);
+            const textEncoder = new TextEncoder();
+            const passwordBuffer = textEncoder.encode(password);
+            const keyMaterial = await crypto.subtle.importKey('raw', passwordBuffer, {name: 'PBKDF2'}, false, ['deriveKey']);
+            const key = await crypto.subtle.deriveKey(
+                {name: 'PBKDF2', salt: salt, iterations: 100000, hash: 'SHA-256'}, 
+                keyMaterial, 
+                {name: 'AES-GCM', length: 256}, 
+                false, 
+                ['decrypt']
+            );
+            
+            try {
+                const decryptedData = await crypto.subtle.decrypt({name: 'AES-GCM', iv: iv}, key, encryptedData);
+                const textDecoder = new TextDecoder();
+                const settingsStr = textDecoder.decode(decryptedData);
+                const settings = JSON.parse(settingsStr);
+                """ + "\n".join([f'document.querySelector("{ctrl[1]}").value = settings["{ctrl[0]}"];' for ctrl in control_ids]) + """
+                """ + "\n".join([f'document.querySelector("{ctrl[1]}").dispatchEvent(new InputEvent("input", {{ bubbles: true }}));' for ctrl in control_ids]) + """
+            } catch (err) {
+                alert("Failed to decrypt. Check your password and try again.");
+                console.error("Decryption failed:", err);
+            }
+        };
+        input.click();
+    }"""
+    return js_code