LLM settings from url

api/main.py

@@ -44,20 +44,19 @@ def semantic():
 @app.route('/chat', methods=['POST'])
 @cross_origin()
 def chat():
-
     query = request.json.get('query')
     session_id = request.json.get('sessionId')
     history = request.json.get('history', [])
-    settings = Settings(**request.json.get('settings', {}))
-
-    def run(callback):
-        return run_query(session_id, query, history, settings, callback)
+    settings = request.json.get('settings', {})
 
     def formatter(item):
         if isinstance(item, Exception):
             item = {'state': 'error', 'error': str(item)}
         return json.dumps(item)
 
+    def run(callback):
+        return run_query(session_id, query, history, Settings(**settings), callback)
+
     return Response(stream_with_context(stream(stream_callback(run, formatter))), mimetype='text/event-stream')
 
 

api/src/stampy_chat/chat.py

@@ -191,7 +191,12 @@ def run_query(session_id: str, query: str, history: List[Dict], settings: Settin
     callbacks = [LoggerCallbackHandler(session_id=session_id, query=query, history=history)]
     if callback:
         callbacks += [BroadcastCallbackHandler(callback)]
-    chat_model = get_model(streaming=True, callbacks=callbacks, max_tokens=settings.max_response_tokens)
+    chat_model = get_model(
+        streaming=True,
+        callbacks=callbacks,
+        max_tokens=settings.max_response_tokens,
+        model=settings.completions
+    )
 
     chain = LLMChain(
         llm=chat_model,

web/src/components/html.tsx

@@ -1,8 +1,22 @@
+import { ChangeEvent } from "react";
+import type { Parseable } from "../types";
+
 // const Colours = ["blue", "cyan", "teal", "green", "amber"].map(
 //   colour => `bg-${colour}-100 border-${colour}-300 text-${colour}-800`
 // );
 // this would be nice, but Tailwind needs te actual string of the class to be in
 // the source file for it to be included in the build
+type NumberParser = (v: Parseable) => number;
+type InputFields = {
+  field: string;
+  label: string;
+  value?: Parseable;
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+  parser?: NumberParser;
+  updater: (v: any) => any;
+};
 
 export const Colours = [
   "bg-red-100    border-red-300   text-red-800",
@@ -30,3 +44,78 @@ export const A: React.FC<{
     <a className={className}>{children}</a>
   );
 };
+
+const between =
+  (
+    min: Parseable,
+    max: Parseable,
+    parser: NumberParser,
+    updater: (v: any) => any
+  ) =>
+  (event: ChangeEvent) => {
+    let num = parser((event.target as HTMLInputElement).value);
+    if (isNaN(num)) {
+      return;
+    } else if (min !== undefined && num < parser(min)) {
+      num = parser(min);
+    } else if (max !== undefined && num > parser(max)) {
+      num = parser(max);
+    }
+    updater(num);
+  };
+
+export const SectionHeader = ({ text }: { text: string }) => (
+  <h4 className="col-span-4 text-lg font-semibold">{text}</h4>
+);
+
+export const NumberInput = ({
+  field,
+  value,
+  label,
+  min,
+  max,
+  updater,
+  // this cast is just to satisfy typescript - it can handle numbers, strings and undefined just fine
+  parser = (v) => parseInt(v as string, 10),
+}: InputFields) => (
+  <>
+    <label htmlFor={field} className="col-span-3 inline-block">
+      {label}:{" "}
+    </label>
+    <input
+      name={field}
+      value={value}
+      className="w-20"
+      onChange={between(min, max, parser, updater)}
+      type="number"
+    />
+  </>
+);
+
+export const Slider = ({
+  field,
+  value,
+  label,
+  min = 0,
+  max = 1,
+  step = 0.01,
+  // this cast is just to satisfy typescript - it can handle numbers, strings and undefined just fine
+  parser = (v) => parseFloat(v as string),
+  updater,
+}: InputFields) => (
+  <>
+    <label htmlFor={field} className="col-span-2">
+      {label}:
+    </label>
+    <input
+      name={field}
+      className="col-span-2"
+      value={value}
+      onChange={between(min, max, parser, updater)}
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+    />
+  </>
+);