added model inference max tokens and temperature

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import Options from "./components/Options";
 import Recipe from "./components/Recipe";
 import { setModelLayers } from "./utils/modelCookies";
 import { useAPI } from "./hooks/useAPI";
+import { devError } from "./utils/devLogger";
 
 function App() {
   const [models, setModels] = useState([]);
@@ -34,12 +35,12 @@ function App() {
               }
             },
             (error) => {
-              console.error("Failed to load models:", error);
+              devError("Failed to load models:", error);
             }
           );
         }
       } catch (error) {
-        console.error("Error fetching models:", error);
+        devError("Error fetching models:", error);
       }
     };
 

frontend/src/components/InferencePopup.jsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import Dropdown from "./Dropdown";
+import NumberInput from "./NumberInput";
 import { useAPI } from "../hooks/useAPI";
+import { devLog, devError } from "../utils/devLogger";
 
 const InferencePopup = ({ isOpen, onClose, models }) => {
   const [selectedModel, setSelectedModel] = useState("");
@@ -8,6 +10,8 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
   const [response, setResponse] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
+  const [maxNewTokens, setMaxNewTokens] = useState(512);
+  const [temperature, setTemperature] = useState(0.7);
 
   const { inference, checkTaskStatus } = useAPI();
 
@@ -25,22 +29,21 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
       const inferenceData = {
         model_name: selectedModel,
         prompt: prompt,
-        max_new_tokens: 100, // You can make this configurable if needed
-        temperature: 0.7, // Add temperature field
+        max_new_tokens: maxNewTokens,
+        temperature: temperature,
       };
 
-      console.log("Starting inference with data:", inferenceData);
+      devLog("Starting inference with data:", inferenceData);
       const result = await inference(inferenceData);
-      console.log("Got inference result:", result);
+      devLog("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);
+            devLog("Inference task result:", taskResult);
+            if (taskResult && taskResult.response) {
+              setResponse(taskResult.response);
             } else if (taskResult && taskResult.error) {
               setError(`Inference failed: ${taskResult.error}`);
             } else {
@@ -50,7 +53,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           },
           (errorMessage) => {
             // Error callback for task status check
-            console.error("Inference task failed:", errorMessage);
+            devError("Inference task failed:", errorMessage);
             setError(`Task failed: ${errorMessage}`);
             setIsLoading(false);
           }
@@ -66,7 +69,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
         setIsLoading(false);
       }
     } catch (err) {
-      console.error("Inference error:", err);
+      devError("Inference error:", err);
       setError(`Error: ${err.message}`);
       setIsLoading(false);
     }
@@ -137,9 +140,7 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
           </div>
         </div>
 
-        {/* Content */}
         <div className="p-6 space-y-6 max-h-[calc(90vh-140px)] overflow-y-auto">
-          {/* Model Selection */}
           <Dropdown
             label="Select Model"
             selectedValue={selectedModel}
@@ -150,7 +151,6 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
             searchPlaceholder="Search models..."
           />
 
-          {/* Prompt Input */}
           <div>
             <label className="block text-sm font-medium text-secondary-700 mb-2">
               Prompt
@@ -164,6 +164,40 @@ const InferencePopup = ({ isOpen, onClose, models }) => {
             />
           </div>
 
+          {/* Configuration Section */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-2">
+                Max New Tokens
+              </label>
+              <NumberInput
+                value={maxNewTokens}
+                onChange={setMaxNewTokens}
+                min={1}
+                max={1024}
+                step={1}
+                className=""
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-2">
+                Temperature
+              </label>
+              <NumberInput
+                value={temperature}
+                onChange={setTemperature}
+                min={0.1}
+                max={2.0}
+                step={0.1}
+                allowDecimals={true}
+                className=""
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+
           {/* Generate Button */}
           <button
             onClick={handleInference}

frontend/src/components/NumberInput.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 const NumberInput = ({
   label,
@@ -6,33 +6,83 @@ const NumberInput = ({
   onChange,
   min = 1,
   max = 48,
+  step = 1,
+  allowDecimals = false,
   className = "",
   compact = false,
+  disabled = false,
 }) => {
   const [inputValue, setInputValue] = useState(value?.toString() || "");
+  const prevDisabledRef = useRef(disabled);
 
   useEffect(() => {
     setInputValue(value?.toString() || "");
   }, [value]);
 
+  useEffect(() => {
+    if (disabled && !prevDisabledRef.current && allowDecimals) {
+      const numValue = parseFloat(inputValue);
+      if (
+        inputValue === "" ||
+        inputValue === "." ||
+        isNaN(numValue) ||
+        numValue < min ||
+        numValue > max
+      ) {
+        const clampedValue = isNaN(numValue)
+          ? min
+          : Math.max(min, Math.min(max, numValue));
+        setInputValue(clampedValue.toString());
+        onChange(clampedValue);
+      }
+    }
+    prevDisabledRef.current = disabled;
+  }, [disabled, allowDecimals, inputValue, min, max, onChange]);
+
   const handleChange = (e) => {
     const inputVal = e.target.value;
-    setInputValue(inputVal);
-    if (inputVal === "") return;
-    const numValue = parseInt(inputVal);
-    if (!isNaN(numValue)) {
-      const clampedValue = Math.max(min, Math.min(max, numValue));
-      onChange(clampedValue);
-      if (clampedValue !== numValue) {
-        setInputValue(clampedValue.toString());
+
+    if (allowDecimals) {
+      if (inputVal === ".") return;
+
+      setInputValue(inputVal);
+
+      if (inputVal !== "" && !inputVal.endsWith(".")) {
+        const numValue = parseFloat(inputVal);
+        if (!isNaN(numValue)) {
+          onChange(numValue);
+        }
+      }
+    } else {
+      const cleanedInput = inputVal.includes(".")
+        ? inputVal.split(".")[0]
+        : inputVal;
+      setInputValue(cleanedInput);
+
+      if (cleanedInput === "") return;
+      const numValue = parseInt(cleanedInput);
+      if (!isNaN(numValue)) {
+        const clampedValue = Math.max(min, Math.min(max, numValue));
+        onChange(clampedValue);
+        if (clampedValue !== numValue) {
+          setInputValue(clampedValue.toString());
+        }
       }
     }
   };
 
   const handleBlur = () => {
-    if (inputValue === "" || isNaN(parseInt(inputValue))) {
+    if (
+      inputValue === "" ||
+      isNaN(allowDecimals ? parseFloat(inputValue) : parseInt(inputValue))
+    ) {
       onChange(min);
       setInputValue(min.toString());
+    } else if (allowDecimals) {
+      const numValue = parseFloat(inputValue);
+      const clampedValue = Math.max(min, Math.min(max, numValue));
+      onChange(clampedValue);
+      setInputValue(clampedValue.toString());
     }
   };
 
@@ -53,7 +103,9 @@ const NumberInput = ({
           value={inputValue}
           onChange={handleChange}
           onBlur={handleBlur}
-          className={`w-full bg-white border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200 text-secondary-800 font-medium ${
+          step={step}
+          disabled={disabled}
+          className={`w-full bg-white border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200 text-secondary-800 font-medium disabled:opacity-50 disabled:cursor-not-allowed ${
             compact ? "p-2 rounded-lg text-sm" : "p-4 rounded-xl"
           }`}
           min={min}

frontend/src/components/Options.jsx

@@ -4,6 +4,7 @@ import NumberInput from "./NumberInput";
 import InferencePopup from "./InferencePopup";
 import { setModelLayers } from "../utils/modelCookies";
 import { useAPI } from "../hooks/useAPI";
+import { devLog, devError } from "../utils/devLogger";
 
 const Options = ({
   models,
@@ -51,15 +52,15 @@ const Options = ({
         merged_name: mergedName,
       };
 
-      console.log("Starting merge with data:", mergeData);
+      devLog("Starting merge with data:", mergeData);
       const taskId = await mergeModels(mergeData);
-      console.log("Got merge task ID:", taskId);
+      devLog("Got merge task ID:", taskId);
 
       if (taskId) {
         checkTaskStatus(
           taskId,
           (taskResult) => {
-            console.log("Merge result:", taskResult);
+            devLog("Merge result:", taskResult);
             if (taskResult.response) {
               setMergeStatus("Merge successful!");
               const newModelName = taskResult.response || mergedName;
@@ -73,14 +74,14 @@ const Options = ({
             setIsLoading(false);
           },
           (error) => {
-            console.error("Merge task failed:", error);
+            devError("Merge task failed:", error);
             setMergeStatus(`Merge failed: ${error}`);
             setIsLoading(false);
           }
         );
       }
     } catch (error) {
-      console.error("Merge error:", error);
+      devError("Merge error:", error);
       setMergeStatus(`Error: ${error.message}`);
       setIsLoading(false);
     }

frontend/src/hooks/useAPI.js

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { devLog, devError } from "../utils/devLogger";
 
 const API_BASE = "https://tcmmichaelb139-evolutiontransformer.hf.space";
 
@@ -12,13 +13,13 @@ export const useAPI = () => {
 
         if (!response.ok) {
           const error = `HTTP ${response.status}: ${response.statusText}`;
-          console.error("Task check failed:", error);
+          devError("Task check failed:", error);
           if (errorCallback) errorCallback(error);
           return;
         }
 
         const data = await response.json();
-        console.log("Task status:", data.status);
+        devLog("Task status:", data.status);
 
         if (data.status === "SUCCESS") {
           successCallback(data.result);
@@ -29,11 +30,11 @@ export const useAPI = () => {
           );
         } else if (data.status === "FAILURE") {
           const error = data.result || "Task failed";
-          console.error("Task failed:", error);
+          devError("Task failed:", error);
           if (errorCallback) errorCallback(error);
         }
       } catch (error) {
-        console.error("Task check error:", error);
+        devError("Task check error:", error);
         if (errorCallback) errorCallback(error.message);
       }
     },
@@ -42,25 +43,31 @@ export const useAPI = () => {
 
   const fetchModels = useCallback(async () => {
     try {
-      console.log("Fetching models...");
+      devLog("Fetching models...");
       const response = await fetch(`${API_BASE}/list_models`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
       });
 
+      if (!response.ok) {
+        const error = `HTTP ${response.status}: ${response.statusText}`;
+        devError("Fetch models failed:", error);
+        throw new Error(error);
+      }
+
       const data = await response.json();
-      console.log("Fetch models response:", data);
+      devLog("Fetch models response:", data);
       return data.task_id;
     } catch (error) {
-      console.error("Fetch models error:", error);
+      devError("Fetch models error:", error);
       throw error;
     }
   }, []);
 
   const mergeModels = useCallback(async (mergeData) => {
     try {
-      console.log("Merging models with data:", mergeData);
+      devLog("Merging models with data:", mergeData);
       const response = await fetch(`${API_BASE}/merge`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -68,18 +75,24 @@ export const useAPI = () => {
         credentials: "include",
       });
 
+      if (!response.ok) {
+        const error = `HTTP ${response.status}: ${response.statusText}`;
+        devError("Merge failed:", error);
+        throw new Error(error);
+      }
+
       const data = await response.json();
-      console.log("Merge response:", data);
+      devLog("Merge response:", data);
       return data.task_id;
     } catch (error) {
-      console.error("Merge error:", error);
+      devError("Merge error:", error);
       throw error;
     }
   }, []);
 
   const inference = useCallback(async (inferenceData) => {
     try {
-      console.log("Running inference with data:", inferenceData);
+      devLog("Running inference with data:", inferenceData);
       const response = await fetch(`${API_BASE}/generate`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -89,15 +102,15 @@ export const useAPI = () => {
 
       if (!response.ok) {
         const error = `HTTP ${response.status}: ${response.statusText}`;
-        console.error("Inference failed:", error);
+        devError("Inference failed:", error);
         throw new Error(error);
       }
 
       const data = await response.json();
-      console.log("Inference response:", data);
+      devLog("Inference response:", data);
       return data;
     } catch (error) {
-      console.error("Inference error:", error);
+      devError("Inference error:", error);
       throw error;
     }
   }, []);

frontend/src/utils/devLogger.js

@@ -0,0 +1,20 @@
+// Development-only logging utility
+// These logs will only appear in development builds, not production
+
+export const devLog = (...args) => {
+  if (import.meta.env.DEV) {
+    console.log(...args);
+  }
+};
+
+export const devError = (...args) => {
+  if (import.meta.env.DEV) {
+    console.error(...args);
+  }
+};
+
+export const devWarn = (...args) => {
+  if (import.meta.env.DEV) {
+    console.warn(...args);
+  }
+};