Spaces:

tcmmichaelb139
/

evolutiontransformer

Sleeping

App Files Files Community

tcmmichaelb139 commited on Sep 22

Commit

45d9469

1 Parent(s): 89493ee

small updates + api cookies

Browse files

Files changed (9) hide show

evolutiontransformer/api.py +9 -0
frontend/index.html +14 -11
frontend/public/favicon.svg +5 -0
frontend/public/vite.svg +0 -1
frontend/src/App.jsx +31 -2
frontend/src/components/InferencePopup.jsx +37 -9
frontend/src/components/Options.jsx +26 -18
frontend/src/hooks/useAPI.js +58 -18
frontend/src/index.css +2 -2

evolutiontransformer/api.py CHANGED Viewed

@@ -5,6 +5,7 @@ os.environ["TOKENIZERS_PARALLELISM"] = "false"
 import uuid
 from typing import List, Tuple
 from fastapi import FastAPI, Depends, HTTPException, Request, Response
 from pydantic import BaseModel
 from celery import Celery
 from dotenv import load_dotenv
@@ -19,6 +20,14 @@ celery_app = Celery("tasks", broker=REDIS_URL, backend=REDIS_URL)
 app = FastAPI()
 class GenerateRequest(BaseModel):
     model_name: str

 import uuid
 from typing import List, Tuple
 from fastapi import FastAPI, Depends, HTTPException, Request, Response
+from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 from celery import Celery
 from dotenv import load_dotenv
 app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],  # todo add website url
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 class GenerateRequest(BaseModel):
     model_name: str

frontend/index.html CHANGED Viewed

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

 <!doctype html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Evolution Transformer</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

frontend/public/favicon.svg ADDED Viewed

frontend/public/vite.svg DELETED Viewed

frontend/src/App.jsx CHANGED Viewed

@@ -3,6 +3,7 @@ import "./App.css";
 import Options from "./components/Options";
 import Recipe from "./components/Recipe";
 import { setModelLayers } from "./utils/modelCookies";
 function App() {
   const [models, setModels] = useState([]);
@@ -14,11 +15,39 @@ function App() {
   const [mergedName, setMergedName] = useState("merged");
   const [numLayers, setNumLayers] = useState(12);
   useEffect(() => {
-    setModels(["svamp", "tinystories"]);
     setModelLayers("svamp", 24);
     setModelLayers("tinystories", 24);
-  }, []);
   return (
     <div className="h-screen bg-gradient-to-br from-primary-50 to-secondary-50 overflow-hidden">

 import Options from "./components/Options";
 import Recipe from "./components/Recipe";
 import { setModelLayers } from "./utils/modelCookies";
+import { useAPI } from "./hooks/useAPI";
 function App() {
   const [models, setModels] = useState([]);
   const [mergedName, setMergedName] = useState("merged");
   const [numLayers, setNumLayers] = useState(12);
+  const { fetchModels, checkTaskStatus } = useAPI();
   useEffect(() => {
     setModelLayers("svamp", 24);
     setModelLayers("tinystories", 24);
+    const loadModels = async () => {
+      try {
+        console.log("Loading models...");
+        const taskId = await fetchModels();
+        console.log("Got task ID:", taskId);
+        if (taskId) {
+          checkTaskStatus(
+            taskId,
+            (result) => {
+              console.log("Models loaded successfully:", result);
+              if (result && Array.isArray(result.response)) {
+                setModels(result.response);
+              }
+            },
+            (error) => {
+              console.error("Failed to load models:", error);
+            }
+          );
+        }
+      } catch (error) {
+        console.error("Error fetching models:", error);
+      }
+    };
+    loadModels();
+  }, [fetchModels, checkTaskStatus]);
   return (
     <div className="h-screen bg-gradient-to-br from-primary-50 to-secondary-50 overflow-hidden">

frontend/src/components/InferencePopup.jsx CHANGED Viewed

@@ -9,7 +9,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
-  const { inference } = useAPI();
   const handleInference = async () => {
     if (!selectedModel || !prompt.trim()) {
@@ -23,23 +23,51 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
     try {
       const inferenceData = {
-        model: selectedModel,
         prompt: prompt,
-        max_length: 100, // You can make this configurable if needed
       };
       const result = await inference(inferenceData);
-      if (result && result.generated_text) {
-        setResponse(result.generated_text);
       } else if (result && result.error) {
-        setError(`Inference failed: ${result.error}`);
       } else {
-        setError("No response received from the model");
       }
     } catch (err) {
       setError(`Error: ${err.message}`);
-    } finally {
       setIsLoading(false);
     }
   };

   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
+  const { inference, checkTaskStatus } = useAPI();
   const handleInference = async () => {
     if (!selectedModel || !prompt.trim()) {
     try {
       const inferenceData = {
+        model_name: selectedModel,
         prompt: prompt,
+        max_new_tokens: 100, // You can make this configurable if needed
+        temperature: 0.7, // Add temperature field
       };
+      console.log("Starting inference with data:", inferenceData);
       const result = await inference(inferenceData);
+      console.log("Got inference result:", result);
+      if (result && result.task_id) {
+        // Check task status for inference result
+        checkTaskStatus(
+          result.task_id,
+          (taskResult) => {
+            console.log("Inference task result:", taskResult);
+            if (taskResult && taskResult.generated_text) {
+              setResponse(taskResult.generated_text);
+            } else if (taskResult && taskResult.error) {
+              setError(`Inference failed: ${taskResult.error}`);
+            } else {
+              setError("No response received from the model");
+            }
+            setIsLoading(false);
+          },
+          (errorMessage) => {
+            // Error callback for task status check
+            console.error("Inference task failed:", errorMessage);
+            setError(`Task failed: ${errorMessage}`);
+            setIsLoading(false);
+          }
+        );
       } else if (result && result.error) {
+        // Check if it's a server error
+        const isServerError = result.error.includes("HTTP 5");
+        const errorPrefix = isServerError ? "🔴 Server Error: " : "Error: ";
+        setError(`${errorPrefix}${result.error}`);
+        setIsLoading(false);
       } else {
+        setError("No task ID received");
+        setIsLoading(false);
       }
     } catch (err) {
+      console.error("Inference error:", err);
       setError(`Error: ${err.message}`);
       setIsLoading(false);
     }
   };

frontend/src/components/Options.jsx CHANGED Viewed

@@ -43,36 +43,44 @@ const Options = ({
     try {
       const mergeData = {
-        model1: selectedModel1,
-        model2: selectedModel2,
         layer_recipe: layerRecipe,
         embedding_lambdas: embeddingLambdas,
         linear_lambdas: linearLambdas,
-        num_layers: numLayers,
         merged_name: mergedName,
       };
       const taskId = await mergeModels(mergeData);
       if (taskId) {
-        checkTaskStatus(taskId, (result) => {
-          if (result.success) {
-            setMergeStatus("Merge successful!");
-            const newModelName = result.model_name || mergedName;
-            setModels((prev) => [...prev, newModelName]);
-            setModelLayers(newModelName, numLayers);
-          } else {
-            setMergeStatus(`Merge failed: ${result.error || "Unknown error"}`);
           }
-          setIsLoading(false);
-        });
-      } else {
-        setMergeStatus("Failed to start merge process");
-        setIsLoading(false);
       }
     } catch (error) {
       setMergeStatus(`Error: ${error.message}`);
       setIsLoading(false);
     }

     try {
       const mergeData = {
+        model1_name: selectedModel1,
+        model2_name: selectedModel2,
         layer_recipe: layerRecipe,
         embedding_lambdas: embeddingLambdas,
         linear_lambdas: linearLambdas,
         merged_name: mergedName,
       };
+      console.log("Starting merge with data:", mergeData);
       const taskId = await mergeModels(mergeData);
+      console.log("Got merge task ID:", taskId);
       if (taskId) {
+        checkTaskStatus(
+          taskId,
+          (taskResult) => {
+            console.log("Merge result:", taskResult);
+            if (taskResult.response) {
+              setMergeStatus("Merge successful!");
+              const newModelName = taskResult.response || mergedName;
+              setModels((prev) => [...prev, newModelName]);
+              setModelLayers(newModelName, numLayers);
+            } else {
+              setMergeStatus(
+                `Merge failed: ${taskResult.error || "Unknown error"}`
+              );
+            }
+            setIsLoading(false);
+          },
+          (error) => {
+            console.error("Merge task failed:", error);
+            setMergeStatus(`Merge failed: ${error}`);
+            setIsLoading(false);
           }
+        );
       }
     } catch (error) {
+      console.error("Merge error:", error);
       setMergeStatus(`Error: ${error.message}`);
       setIsLoading(false);
     }

frontend/src/hooks/useAPI.js CHANGED Viewed

@@ -3,62 +3,102 @@ import { useCallback } from "react";
 const API_BASE = "https://tcmmichaelb139-evolutiontransformer.hf.space";
 export const useAPI = () => {
-  const checkTaskStatus = useCallback(async (taskId, callback) => {
-    try {
-      const response = await fetch(`${API_BASE}/tasks/${taskId}`);
-      const data = await response.json();
-      if (data.status === "SUCCESS") {
-        callback(data.result);
-      } else if (data.status === "PENDING") {
-        setTimeout(() => checkTaskStatus(taskId, callback), 1000);
       }
-    } catch (error) {
-      console.error("Task check failed:", error);
-    }
-  }, []);
   const fetchModels = useCallback(async () => {
     try {
       const response = await fetch(`${API_BASE}/list_models`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
       });
       const data = await response.json();
       return data.task_id;
     } catch (error) {
-      console.error("Failed to fetch models:", error);
-      return null;
     }
   }, []);
   const mergeModels = useCallback(async (mergeData) => {
     try {
       const response = await fetch(`${API_BASE}/merge`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(mergeData),
       });
       const data = await response.json();
       return data.task_id;
     } catch (error) {
-      console.error("Merge failed:", error);
-      return null;
     }
   }, []);
   const inference = useCallback(async (inferenceData) => {
     try {
       const response = await fetch(`${API_BASE}/generate`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(inferenceData),
       });
       const data = await response.json();
       return data;
     } catch (error) {
-      console.error("Inference failed:", error);
-      return null;
     }
   }, []);

 const API_BASE = "https://tcmmichaelb139-evolutiontransformer.hf.space";
 export const useAPI = () => {
+  const checkTaskStatus = useCallback(
+    async (taskId, successCallback, errorCallback) => {
+      try {
+        const response = await fetch(`${API_BASE}/tasks/${taskId}`, {
+          credentials: "include",
+        });
+        if (!response.ok) {
+          const error = `HTTP ${response.status}: ${response.statusText}`;
+          console.error("Task check failed:", error);
+          if (errorCallback) errorCallback(error);
+          return;
+        }
+        const data = await response.json();
+        console.log("Task status:", data.status);
+        if (data.status === "SUCCESS") {
+          successCallback(data.result);
+        } else if (data.status === "PENDING") {
+          setTimeout(
+            () => checkTaskStatus(taskId, successCallback, errorCallback),
+            1000
+          );
+        } else if (data.status === "FAILURE") {
+          const error = data.result || "Task failed";
+          console.error("Task failed:", error);
+          if (errorCallback) errorCallback(error);
+        }
+      } catch (error) {
+        console.error("Task check error:", error);
+        if (errorCallback) errorCallback(error.message);
       }
+    },
+    []
+  );
   const fetchModels = useCallback(async () => {
     try {
+      console.log("Fetching models...");
       const response = await fetch(`${API_BASE}/list_models`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
+        credentials: "include",
       });
       const data = await response.json();
+      console.log("Fetch models response:", data);
       return data.task_id;
     } catch (error) {
+      console.error("Fetch models error:", error);
+      throw error;
     }
   }, []);
   const mergeModels = useCallback(async (mergeData) => {
     try {
+      console.log("Merging models with data:", mergeData);
       const response = await fetch(`${API_BASE}/merge`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(mergeData),
+        credentials: "include",
       });
       const data = await response.json();
+      console.log("Merge response:", data);
       return data.task_id;
     } catch (error) {
+      console.error("Merge error:", error);
+      throw error;
     }
   }, []);
   const inference = useCallback(async (inferenceData) => {
     try {
+      console.log("Running inference with data:", inferenceData);
       const response = await fetch(`${API_BASE}/generate`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(inferenceData),
+        credentials: "include",
       });
+      if (!response.ok) {
+        const error = `HTTP ${response.status}: ${response.statusText}`;
+        console.error("Inference failed:", error);
+        throw new Error(error);
+      }
       const data = await response.json();
+      console.log("Inference response:", data);
       return data;
     } catch (error) {
+      console.error("Inference error:", error);
+      throw error;
     }
   }, []);

frontend/src/index.css CHANGED Viewed

@@ -64,13 +64,13 @@ body {
 }
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, #0ea5e9, #22c55e);
   border-radius: 4px;
   transition: background 0.2s ease;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, #0284c7, #16a34a);
 }
 ::-webkit-scrollbar-corner {

 }
 ::-webkit-scrollbar-thumb {
+  background: #0ea5e9;
   border-radius: 4px;
   transition: background 0.2s ease;
 }
 ::-webkit-scrollbar-thumb:hover {
+  background: #0284c7;
 }
 ::-webkit-scrollbar-corner {