Begin type checking/input validation effort

environment.yml

@@ -14,3 +14,5 @@ dependencies:
   - pillow=8.*
   - torchvision=0.*
   - openai=0.*
+  - pydantic=1.*
+  

src/main.py

@@ -2,6 +2,7 @@
 import sys
 import json
 from typing import Optional
+from src import search_type
 
 # External Packages
 import uvicorn
@@ -9,6 +10,7 @@ from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel, validator
 
 # Internal Packages
 from src.search_type import asymmetric, symmetric_ledger, image_search
@@ -24,6 +26,14 @@ processor_config = ProcessorConfig()
 config = {}
 app = FastAPI()
 
+class Config(BaseModel):
+    content_type: Optional[SearchConfig]
+    search_type: Optional[SearchModels]
+    processor: Optional[ProcessorConfig]
+
+    class Config:
+        arbitrary_types_allowed = True
+
 app.mount("/views", StaticFiles(directory="views"), name="views")
 templates = Jinja2Templates(directory="views/")
 
@@ -33,11 +43,11 @@ def ui(request: Request):
 
 @app.get('/config')
 def config():
-    print(config)
     return config
 
 @app.post('/config')
-async def config(updated_config: Request):
+async def config(updated_config: Config):
+    print(updated_config)
     data = await updated_config.json()
     return data
 

views/scripts/config.js

@@ -2,6 +2,9 @@ var showConfig = document.getElementById("show-config");
 var rawConfig = {};
 
 var configForm = document.getElementById("config-form");
+
+var emptyValueDefault = "🖊️";
+
 fetch("/config")
     .then(response => response.json())
     .then(data => {
@@ -35,13 +38,10 @@ function processChildren(element, data) {
         child.className = "config-element";
         child.appendChild(document.createTextNode(key + ": "));
         if (data[key] === Object(data[key]) && !Array.isArray(data[key])) {
+            child.className+=" config-title";
             processChildren(child, data[key]);
         } else {
-            var value = document.createElement("span");
+            child.appendChild(createValueNode(data, key));
-            value.id = key+"-value";
-            value.textContent = !data[key] ? "🖊️" : data[key];
-            makeElementEditable(value, data, key);
-            child.appendChild(value);
         }
         element.appendChild(child);
     }
@@ -59,13 +59,17 @@ function makeElementEditable(original, data, key) {
     });
 }
 
+function createValueNode(data, key) {
+    var valueElement = document.createElement("span");
+    valueElement.className = "config-element-value";
+    valueElement.textContent = !data[key] ? emptyValueDefault : data[key];
+    makeElementEditable(valueElement, data, key);
+    return valueElement;
+}
+
 function fixInputOnFocusOut(original, data, key) {
     original.addEventListener("blur", () => {
-        var value = document.createElement("span");
+        data[key] = (!!data[key] && original.value != emptyValueDefault) ? original.value : "";
-        value.id = original.id;
+        original.parentNode.replaceChild(createValueNode(data, key), original);
-        value.textContent = original.value;
-        data[key] = value.textContent;
-        makeElementEditable(value, data, key);
-        original.parentNode.replaceChild(value, original);
     })
 }

views/style.css

@@ -1,3 +1,24 @@
-.config-element {
+:root {
+    --primary-color: #ffffff;
+    --bold-color: #2073ee;
+    --complementary-color: #124408;
+    --accent-color-0: #57f0b5;
+}
+
+input[type=text] {
+    width: 40%;
+}
+
+div.config-element {
+    color: var(--bold-color);
     margin: 8px;
 }
+
+div.config-title {
+    font-weight: bold;
+}
+
+span.config-element-value {
+    color: var(--complementary-color);
+    font-weight: normal;
+}