Widgets (#91)

Add examples for widgets for playground --------- Co-authored-by: Bagatur <[email protected]> Co-authored-by: Nuno Campos <[email protected]> Co-authored-by: Tat Dat Duong <[email protected]>
langchain-ai · Oct 26, 2023 · 17eda1e · 17eda1e
1 parent 44dc693
commit 17eda1e
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 58 deletions.
diff --git a/examples/widgets/server.py b/examples/widgets/server.py
@@ -0,0 +1,80 @@
+import base64
+from typing import Any, Dict, List, Tuple
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from langchain.document_loaders.blob_loaders import Blob
+from langchain.document_loaders.parsers.pdf import PDFMinerParser
+from langchain.schema.runnable import RunnableLambda
+from pydantic import BaseModel, Field
+
+from langserve.server import add_routes
+
+app = FastAPI(
+    title="LangChain Server",
+    version="1.0",
+    description="Spin up a simple api server using Langchain's Runnable interfaces",
+)
+
+
+# Set all CORS enabled origins
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+    expose_headers=["*"],
+)
+
+
+class ChatHistory(BaseModel):
+    chat_history: List[Tuple[str, str]] = Field(
+        ...,
+        examples=[[("a", "aa")]],
+        extra={"widget": {"type": "chat", "input": "question", "output": "answer"}},
+    )
+    question: str
+
+
+class FileProcessingRequest(BaseModel):
+    file: bytes = Field(..., extra={"widget": {"type": "base64file"}})
+    num_chars: int = 100
+
+
+def chat_with_bot(input: Dict[str, Any]) -> Dict[str, Any]:
+    """Bot that repeats the question twice."""
+    return {
+        "answer": input["question"] * 2,
+        "woof": "its so bad to woof, meow is better",
+    }
+
+
+def process_file(input: Dict[str, Any]) -> str:
+    """Extract the text from the first page of the PDF."""
+    content = base64.decodebytes(input["file"])
+    blob = Blob(data=content)
+    documents = list(PDFMinerParser().lazy_parse(blob))
+    content = documents[0].page_content
+    return content[: input["num_chars"]]
+
+
+add_routes(
+    app,
+    RunnableLambda(chat_with_bot).with_types(input_type=ChatHistory),
+    config_keys=["configurable"],
+    path="/chat",
+)
+
+add_routes(
+    app,
+    RunnableLambda(process_file).with_types(input_type=FileProcessingRequest),
+    config_keys=["configurable"],
+    path="/pdf",
+)
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="localhost", port=8000)
diff --git a/.../playground/dist/assets/index-0ea7a041.js → .../playground/dist/assets/index-d732a22e.js b/.../playground/dist/assets/index-0ea7a041.js → .../playground/dist/assets/index-d732a22e.js
diff --git a/langserve/playground/dist/index.html b/langserve/playground/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="/____LANGSERVE_BASE_URL/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Playground</title>
-    <script type="module" crossorigin src="/____LANGSERVE_BASE_URL/assets/index-0ea7a041.js"></script>
+    <script type="module" crossorigin src="/____LANGSERVE_BASE_URL/assets/index-d732a22e.js"></script>
     <link rel="stylesheet" href="/____LANGSERVE_BASE_URL/assets/index-da983f33.css">
   </head>
   <body>

diff --git a/langserve/playground/src/App.tsx b/langserve/playground/src/App.tsx
@@ -68,6 +68,10 @@ import {
   ChatMessageTuplesControlRenderer,
   chatMessagesTupleTester,
 } from "./components/ChatMessageTuplesControlRenderer";
+import {
+  fileBase64Tester,
+  FileBase64ControlRenderer,
+} from "./components/FileBase64Tester";
 
 dayjs.extend(relativeDate);
 dayjs.extend(utc);
@@ -110,6 +114,7 @@ const renderers = [
     tester: chatMessagesTupleTester,
     renderer: ChatMessageTuplesControlRenderer,
   },
+  { tester: fileBase64Tester, renderer: FileBase64ControlRenderer },
 ];
 
 const nestedArrayControlTester: RankedTester = rankWith(1, (_, jsonSchema) => {

diff --git a/langserve/playground/src/components/ChatMessageTuplesControlRenderer.tsx b/langserve/playground/src/components/ChatMessageTuplesControlRenderer.tsx
@@ -9,6 +9,7 @@ import {
   isControl,
 } from "@jsonforms/core";
 import { AutosizeTextarea } from "./AutosizeTextarea";
+import { isJsonSchemaExtra } from "../utils/schema";
 
 type MessageTuple = [string, string];
 
@@ -21,15 +22,18 @@ export const chatMessagesTupleTester = rankWith(
       if (typeof schema.items !== "object" || schema.items == null)
         return false;
 
+      if (!isJsonSchemaExtra(schema) || schema.extra.widget.type !== "chat") {
+        return false;
+      }
+
       if ("type" in schema.items) {
         return (
           schema.items.type === "array" &&
           schema.items.minItems === 2 &&
           schema.items.maxItems === 2 &&
           Array.isArray(schema.items.items) &&
           schema.items.items.length === 2 &&
-          schema.items.items.every((schema) => schema.type === "string") &&
-          schema.title === "Chat History"
+          schema.items.items.every((schema) => schema.type === "string")
         );
       }
 

diff --git a/langserve/playground/src/components/FileBase64Tester.tsx b/langserve/playground/src/components/FileBase64Tester.tsx
@@ -0,0 +1,44 @@
+import { ChangeEvent } from "react";
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import { rankWith, and, schemaMatches, isControl } from "@jsonforms/core";
+import { isJsonSchemaExtra } from "../utils/schema";
+
+export const fileBase64Tester = rankWith(
+  12,
+  and(
+    isControl,
+    schemaMatches((schema) => {
+      if (!isJsonSchemaExtra(schema)) return false;
+      return schema.extra.widget.type === "base64file";
+    })
+  )
+);
+
+export const FileBase64ControlRenderer = withJsonFormsControlProps((props) => {
+  const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const base64String = reader.result as string | null;
+      if (base64String != null) {
+        const prefix = base64String.indexOf("base64,") + "base64,".length;
+        props.handleChange(props.path, base64String.slice(prefix));
+      }
+    };
+
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div className="control">
+      <label className="text-xs uppercase font-semibold text-ls-gray-100">
+        {props.label}
+      </label>
+
+      <input type="file" onChange={handleFileUpload} />
+    </div>
+  );
+});
diff --git a/langserve/playground/src/utils/schema.ts b/langserve/playground/src/utils/schema.ts
@@ -0,0 +1,27 @@
+import { JsonSchema } from "@jsonforms/core";
+
+type JsonSchemaExtra = JsonSchema & {
+  extra: {
+    widget: {
+      type: string;
+    };
+  };
+};
+
+export function isJsonSchemaExtra(x: JsonSchema): x is JsonSchemaExtra {
+  if (!("extra" in x && typeof x.extra === "object" && x.extra != null)) {
+    return false;
+  }
+
+  if (
+    !(
+      "widget" in x.extra &&
+      typeof x.extra.widget === "object" &&
+      x.extra.widget != null
+    )
+  ) {
+    return false;
+  }
+
+  return true;
+}