new style + backend updates

evolutiontransformer/redis.py

@@ -9,14 +9,22 @@ redis_client = Redis.from_url(REDIS_URL, decode_responses=True)
 
 def add_model_to_session(session_id: str, model_name: str, ttl_seconds: int = 3600):
     session_key = f"session:{session_id}:models"
-    redis_client.sadd(session_key, model_name)
-    redis_client.expire(session_key, ttl_seconds)
+
+    existing_models = get_session_models(session_id)
+
+    if model_name not in existing_models:
+        existing_models.append(model_name)
+
+    models_json = json.dumps(existing_models)
+    redis_client.setex(session_key, ttl_seconds, models_json)
 
 
 def get_session_models(session_id: str):
     session_key = f"session:{session_id}:models"
-    models = redis_client.smembers(session_key)
-    return list(models)
+    models_json = redis_client.get(session_key)
+    if models_json:
+        return json.loads(models_json)
+    return []
 
 
 def save_model_recipe(

frontend/src/App.css

@@ -1,39 +1 @@
 @import "tailwindcss";
-
-input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 6px;
-  border-radius: 3px;
-  background: #e2e8f0;
-  outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #0ea5e9;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-input[type="range"]::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #0ea5e9;
-  cursor: pointer;
-  border: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-input[type="range"].accent-primary-600::-webkit-slider-thumb {
-  background: #0284c7;
-}
-
-input[type="range"].accent-primary-600::-moz-range-thumb {
-  background: #0284c7;
-}

frontend/src/App.jsx

@@ -1,10 +1,8 @@
 import { useState, useEffect } from "react";
 import "./App.css";
-import Header from "./components/Header";
-import ModelSelection from "./components/ModelSelection";
-import GlobalControls from "./components/GlobalControls";
-import LayerRecipe from "./components/LayerRecipe";
-import { useAPI } from "./hooks/useAPI";
+import Options from "./components/Options";
+import Recipe from "./components/Recipe";
+import { setModelLayers } from "./utils/modelCookies";
 
 function App() {
   const [models, setModels] = useState([]);
@@ -14,117 +12,43 @@ function App() {
   const [embeddingLambdas, setEmbeddingLambdas] = useState([0.5, 0.5]);
   const [linearLambdas, setLinearLambdas] = useState([0.5, 0.5]);
   const [mergedName, setMergedName] = useState("merged");
-  const [isLoading, setIsLoading] = useState(false);
-  const [result, setResult] = useState(null);
   const [numLayers, setNumLayers] = useState(12);
 
-  const { checkTaskStatus, fetchModels, mergeModels } = useAPI();
-
   useEffect(() => {
-    const loadModels = async () => {
-      const taskId = await fetchModels();
-      if (taskId) {
-        setTimeout(
-          () =>
-            checkTaskStatus(taskId, (result) => {
-              if (result && Array.isArray(result)) {
-                setModels(result);
-              }
-            }),
-          1000
-        );
-      }
-    };
-
-    loadModels();
-  }, [fetchModels, checkTaskStatus]);
-
-  const initializeLayerRecipe = () => {
-    const recipe = [];
-    for (let i = 0; i < numLayers; i++) {
-      recipe.push([[i, i, 0.5]]);
-    }
-    setLayerRecipe(recipe);
-  };
-
-  const updateLayerWeight = (layerIndex, weight) => {
-    const newRecipe = [...layerRecipe];
-    if (!newRecipe[layerIndex]) {
-      newRecipe[layerIndex] = [[layerIndex, layerIndex, weight]];
-    } else {
-      newRecipe[layerIndex][0][2] = weight;
-    }
-    setLayerRecipe(newRecipe);
-  };
-
-  const handleMerge = async () => {
-    if (!selectedModel1 || !selectedModel2 || layerRecipe.length === 0) {
-      alert("Please select both models and configure layer recipe");
-      return;
-    }
-
-    setIsLoading(true);
-    setResult(null);
-
-    const mergeData = {
-      model1_name: selectedModel1,
-      model2_name: selectedModel2,
-      layer_recipe: layerRecipe,
-      embedding_lambdas: embeddingLambdas,
-      linear_lambdas: linearLambdas,
-      merged_name: mergedName,
-    };
-
-    const taskId = await mergeModels(mergeData);
-    if (taskId) {
-      checkTaskStatus(taskId, (result) => {
-        setResult(result);
-        setIsLoading(false);
-      });
-    } else {
-      setIsLoading(false);
-    }
-  };
-
-  const isMergeDisabled =
-    isLoading || !selectedModel1 || !selectedModel2 || layerRecipe.length === 0;
+    setModels(["svamp", "tinystories"]);
+    setModelLayers("svamp", 24);
+    setModelLayers("tinystories", 24);
+  }, []);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 p-6">
-      <div className="max-w-6xl mx-auto">
-        <Header />
-
-        <div className="grid lg:grid-cols-2 gap-8">
-          <ModelSelection
-            models={models}
-            selectedModel1={selectedModel1}
-            setSelectedModel1={setSelectedModel1}
-            selectedModel2={selectedModel2}
-            setSelectedModel2={setSelectedModel2}
-            numLayers={numLayers}
-            setNumLayers={setNumLayers}
-            mergedName={mergedName}
-            setMergedName={setMergedName}
-            onInitializeRecipe={initializeLayerRecipe}
-          />
-
-          <GlobalControls
-            embeddingLambdas={embeddingLambdas}
-            setEmbeddingLambdas={setEmbeddingLambdas}
-            linearLambdas={linearLambdas}
-            setLinearLambdas={setLinearLambdas}
-            onMerge={handleMerge}
-            isLoading={isLoading}
-            isDisabled={isMergeDisabled}
-            result={result}
-          />
-        </div>
-
-        <LayerRecipe
-          layerRecipe={layerRecipe}
-          onUpdateLayerWeight={updateLayerWeight}
-        />
-      </div>
+    <div className="h-screen bg-gradient-to-br from-primary-50 to-secondary-50 overflow-hidden">
+      <Options
+        models={models}
+        selectedModel1={selectedModel1}
+        selectedModel2={selectedModel2}
+        setSelectedModel1={setSelectedModel1}
+        setSelectedModel2={setSelectedModel2}
+        numLayers={numLayers}
+        setNumLayers={setNumLayers}
+        layerRecipe={layerRecipe}
+        embeddingLambdas={embeddingLambdas}
+        linearLambdas={linearLambdas}
+        setModels={setModels}
+        mergedName={mergedName}
+        setMergedName={setMergedName}
+      />
+      <Recipe
+        layerRecipe={layerRecipe}
+        setLayerRecipe={setLayerRecipe}
+        embeddingLambdas={embeddingLambdas}
+        setEmbeddingLambdas={setEmbeddingLambdas}
+        linearLambdas={linearLambdas}
+        setLinearLambdas={setLinearLambdas}
+        numLayers={numLayers}
+        selectedModel1={selectedModel1}
+        selectedModel2={selectedModel2}
+      />
+      <div className="max-w-6xl mx-auto"></div>
     </div>
   );
 }

frontend/src/components/Dropdown.jsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect } from "react";
+
+const Dropdown = ({
+  label,
+  selectedValue,
+  onSelect,
+  options = [],
+  placeholder = "Select an option...",
+  disabled = false,
+  loading = false,
+  icon = null,
+  className = "",
+  dropdownClassName = "",
+  optionClassName = "",
+  showSearch = false,
+  searchPlaceholder = "Search...",
+  emptyMessage = "No options available",
+  loadingMessage = "Loading...",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const filteredOptions = options.filter((option) =>
+    option.label
+      ? option.label.toLowerCase().includes(searchTerm.toLowerCase())
+      : option.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const displayValue = selectedValue?.label || selectedValue || placeholder;
+  const isSelected = selectedValue && selectedValue !== placeholder;
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      {label && (
+        <label className="block text-sm font-medium text-secondary-700 mb-2">
+          {label}
+        </label>
+      )}
+      <button
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`w-full p-4 rounded-xl text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed bg-white border-2 border-secondary-300 hover:bg-primary-50 hover:shadow-lg ${className}`}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            {icon && <div className="text-lg">{icon}</div>}
+            <span
+              className={`${
+                isSelected
+                  ? "text-secondary-800 font-medium"
+                  : "text-secondary-500"
+              } ${loading ? "text-secondary-400" : ""}`}
+            >
+              {loading ? loadingMessage : displayValue}
+            </span>
+          </div>
+          <div className="flex items-center space-x-2">
+            {loading && (
+              <div className="animate-spin w-4 h-4 border-2 border-primary-500 border-t-transparent rounded-full"></div>
+            )}
+            <svg
+              className={`w-5 h-5 text-primary-600 transition-transform duration-200 ${
+                isOpen ? "rotate-180" : ""
+              } ${disabled ? "text-secondary-400" : ""}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </div>
+        </div>
+      </button>
+      {isOpen && !disabled && (
+        <div
+          className={`absolute z-50 w-full mt-2 rounded-xl max-h-60 overflow-hidden bg-white border-2 border-primary-200 shadow-lg ${dropdownClassName}`}
+        >
+          {showSearch && (
+            <div className="p-3 border-b border-secondary-100">
+              <div className="relative">
+                <svg
+                  className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-secondary-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
+                <input
+                  type="text"
+                  placeholder={searchPlaceholder}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-9 pr-3 py-2 border border-secondary-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent hover:border-primary-300 transition-colors text-sm"
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            </div>
+          )}
+          <div className="max-h-48 overflow-y-auto p-2">
+            {loading ? (
+              <div className="p-4 text-center text-secondary-500">
+                <div className="animate-spin w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full mx-auto mb-2"></div>
+                {loadingMessage}
+              </div>
+            ) : filteredOptions.length === 0 ? (
+              <div className="p-4 text-center text-secondary-500">
+                {emptyMessage}
+              </div>
+            ) : (
+              filteredOptions.map((option) => {
+                const optionValue = option.value || option;
+                const optionLabel = option.label || option;
+                const optionIcon = option.icon;
+                const optionDescription = option.description;
+                const isOptionSelected =
+                  selectedValue === optionValue ||
+                  (selectedValue?.value && selectedValue.value === optionValue);
+                return (
+                  <button
+                    key={optionValue}
+                    onClick={() => {
+                      onSelect(option);
+                      setIsOpen(false);
+                      setSearchTerm("");
+                    }}
+                    className={`w-full p-3 text-left rounded-lg transition-all duration-200 hover:bg-blue-100 hover:text-blue-900 ${
+                      isOptionSelected
+                        ? "bg-gradient-to-r from-primary-200 to-accent-200 text-primary-800 font-medium"
+                        : "text-secondary-700 hover:bg-blue-50"
+                    } ${optionClassName}`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      {optionIcon && (
+                        <div className="text-lg">{optionIcon}</div>
+                      )}
+                      <div
+                        className={`w-3 h-3 rounded-full transition-colors ${
+                          isOptionSelected
+                            ? "bg-primary-600"
+                            : "bg-secondary-300"
+                        }`}
+                      ></div>
+                      <div className="flex-1 min-w-0">
+                        <div className="truncate font-medium">
+                          {optionLabel}
+                        </div>
+                        {optionDescription && (
+                          <div className="text-xs text-secondary-500 truncate mt-1">
+                            {optionDescription}
+                          </div>
+                        )}
+                      </div>
+                      {isOptionSelected && (
+                        <svg
+                          className="w-4 h-4 text-primary-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

frontend/src/components/GlobalControls.jsx

@@ -1,135 +0,0 @@
-const GlobalControls = ({
-  embeddingLambdas,
-  setEmbeddingLambdas,
-  linearLambdas,
-  setLinearLambdas,
-  onMerge,
-  isLoading,
-  isDisabled,
-  result,
-}) => {
-  return (
-    <div className="bg-white rounded-2xl shadow-lg p-8 border border-secondary-100">
-      <h2 className="text-2xl font-semibold text-secondary-800 mb-6">
-        Global Controls
-      </h2>
-
-      <div className="space-y-6">
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Embedding Weights
-          </label>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <span className="text-xs text-secondary-600">Model 1</span>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                value={embeddingLambdas[0]}
-                onChange={(e) =>
-                  setEmbeddingLambdas([
-                    parseFloat(e.target.value),
-                    1 - parseFloat(e.target.value),
-                  ])
-                }
-                className="w-full"
-              />
-              <span className="text-sm text-secondary-600">
-                {embeddingLambdas[0].toFixed(2)}
-              </span>
-            </div>
-            <div>
-              <span className="text-xs text-secondary-600">Model 2</span>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                value={embeddingLambdas[1]}
-                onChange={(e) =>
-                  setEmbeddingLambdas([
-                    1 - parseFloat(e.target.value),
-                    parseFloat(e.target.value),
-                  ])
-                }
-                className="w-full"
-              />
-              <span className="text-sm text-secondary-600">
-                {embeddingLambdas[1].toFixed(2)}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Linear Weights
-          </label>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <span className="text-xs text-secondary-600">Model 1</span>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                value={linearLambdas[0]}
-                onChange={(e) =>
-                  setLinearLambdas([
-                    parseFloat(e.target.value),
-                    1 - parseFloat(e.target.value),
-                  ])
-                }
-                className="w-full"
-              />
-              <span className="text-sm text-secondary-600">
-                {linearLambdas[0].toFixed(2)}
-              </span>
-            </div>
-            <div>
-              <span className="text-xs text-secondary-600">Model 2</span>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                value={linearLambdas[1]}
-                onChange={(e) =>
-                  setLinearLambdas([
-                    1 - parseFloat(e.target.value),
-                    parseFloat(e.target.value),
-                  ])
-                }
-                className="w-full"
-              />
-              <span className="text-sm text-secondary-600">
-                {linearLambdas[1].toFixed(2)}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <button
-          onClick={onMerge}
-          disabled={isDisabled}
-          className="w-full py-4 bg-gradient-to-r from-primary-600 to-accent-600 text-white font-semibold rounded-lg hover:from-primary-700 hover:to-accent-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          {isLoading ? "Merging Models..." : "Merge Models"}
-        </button>
-
-        {result && (
-          <div className="mt-4 p-4 bg-accent-50 border border-accent-200 rounded-lg">
-            <h3 className="font-medium text-accent-800 mb-2">
-              Merge Complete!
-            </h3>
-            <p className="text-sm text-accent-700">{JSON.stringify(result)}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default GlobalControls;

frontend/src/components/Header.jsx

@@ -1,15 +0,0 @@
-const Header = () => {
-  return (
-    <header className="text-center mb-12">
-      <h1 className="text-5xl font-bold text-secondary-800 mb-4">
-        Evolution Transformer
-      </h1>
-      <p className="text-xl text-secondary-600 max-w-2xl mx-auto">
-        Combine and evolve transformer models by blending layers with precise
-        control
-      </p>
-    </header>
-  );
-};
-
-export default Header;

frontend/src/components/InferencePopup.jsx

@@ -0,0 +1,196 @@
+import { useState } from "react";
+import Dropdown from "./Dropdown";
+import { useAPI } from "../hooks/useAPI";
+
+const InferencePopup = ({ isOpen, onClose, models }) => {
+  const [selectedModel, setSelectedModel] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [response, setResponse] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const { inference } = useAPI();
+
+  const handleInference = async () => {
+    if (!selectedModel || !prompt.trim()) {
+      setError("Please select a model and enter a prompt");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    setResponse("");
+
+    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 handleClose = () => {
+    setSelectedModel("");
+    setPrompt("");
+    setResponse("");
+    setError("");
+    setIsLoading(false);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)", // Safari support
+      }}
+    >
+      <div className="bg-white rounded-2xl border-2 border-primary-200 shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="p-6 border-b border-secondary-200 bg-gradient-to-r from-primary-50 to-accent-50">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-white">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </svg>
+              </div>
+              <h2 className="text-xl font-bold text-secondary-800">
+                Model Inference
+              </h2>
+            </div>
+            <button
+              onClick={handleClose}
+              className="w-8 h-8 rounded-lg hover:bg-secondary-200 transition-colors duration-200 flex items-center justify-center text-secondary-600 hover:text-secondary-800"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </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}
+            onSelect={setSelectedModel}
+            options={models}
+            placeholder="Choose a model for inference..."
+            showSearch={true}
+            searchPlaceholder="Search models..."
+          />
+
+          {/* Prompt Input */}
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              Prompt
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="Enter your prompt here..."
+              className="w-full h-32 p-3 border-2 border-secondary-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
+              disabled={isLoading}
+            />
+          </div>
+
+          {/* Generate Button */}
+          <button
+            onClick={handleInference}
+            disabled={isLoading || !selectedModel || !prompt.trim()}
+            className="w-full py-3 px-4 bg-gradient-to-r from-primary-500 to-accent-500 text-white font-medium rounded-lg hover:from-primary-600 hover:to-accent-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+          >
+            {isLoading ? (
+              <>
+                <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full"></div>
+                <span>Generating...</span>
+              </>
+            ) : (
+              <>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </svg>
+                <span>Generate</span>
+              </>
+            )}
+          </button>
+
+          {/* Error Display */}
+          {error && (
+            <div className="p-3 rounded-lg bg-red-100 border border-red-200 text-red-800 text-sm">
+              {error}
+            </div>
+          )}
+
+          {/* Response Display */}
+          {response && (
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-2">
+                Generated Response
+              </label>
+              <div className="p-4 bg-primary-50 border-2 border-primary-200 rounded-xl">
+                <p className="text-secondary-800 whitespace-pre-wrap">
+                  {response}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InferencePopup;

frontend/src/components/LayerRecipe.jsx

@@ -1,46 +0,0 @@
-const LayerRecipe = ({ layerRecipe, onUpdateLayerWeight }) => {
-  if (layerRecipe.length === 0) return null;
-
-  return (
-    <div className="mt-8 bg-white rounded-2xl shadow-lg p-8 border border-secondary-100">
-      <h2 className="text-2xl font-semibold text-secondary-800 mb-6">
-        Layer Recipe
-      </h2>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-        {layerRecipe.map((layer, index) => (
-          <div
-            key={index}
-            className="bg-secondary-50 rounded-lg p-4 border border-secondary-200"
-          >
-            <div className="text-sm font-medium text-secondary-700 mb-2">
-              Layer {index}
-            </div>
-            <div className="space-y-2">
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.05"
-                value={layer[0]?.[2] || 0.5}
-                onChange={(e) =>
-                  onUpdateLayerWeight(index, parseFloat(e.target.value))
-                }
-                className="w-full accent-primary-600"
-              />
-              <div className="flex justify-between text-xs text-secondary-600">
-                <span>Model 1</span>
-                <span className="font-medium">
-                  {(layer[0]?.[2] || 0.5).toFixed(2)}
-                </span>
-                <span>Model 2</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default LayerRecipe;

frontend/src/components/ModelSelection.jsx

@@ -1,93 +0,0 @@
-const ModelSelection = ({
-  models,
-  selectedModel1,
-  setSelectedModel1,
-  selectedModel2,
-  setSelectedModel2,
-  numLayers,
-  setNumLayers,
-  mergedName,
-  setMergedName,
-  onInitializeRecipe,
-}) => {
-  return (
-    <div className="bg-white rounded-2xl shadow-lg p-8 border border-secondary-100">
-      <h2 className="text-2xl font-semibold text-secondary-800 mb-6">
-        Model Selection
-      </h2>
-
-      <div className="space-y-6">
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Base Model (Model 1)
-          </label>
-          <select
-            value={selectedModel1}
-            onChange={(e) => setSelectedModel1(e.target.value)}
-            className="w-full p-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-          >
-            <option value="">Select a model</option>
-            {models.map((model) => (
-              <option key={model} value={model}>
-                {model}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Target Model (Model 2)
-          </label>
-          <select
-            value={selectedModel2}
-            onChange={(e) => setSelectedModel2(e.target.value)}
-            className="w-full p-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-          >
-            <option value="">Select a model</option>
-            {models.map((model) => (
-              <option key={model} value={model}>
-                {model}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Number of Layers
-          </label>
-          <input
-            type="number"
-            value={numLayers}
-            onChange={(e) => setNumLayers(parseInt(e.target.value))}
-            className="w-full p-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            min="1"
-            max="48"
-          />
-          <button
-            onClick={onInitializeRecipe}
-            className="mt-2 px-4 py-2 bg-secondary-600 text-white rounded-lg hover:bg-secondary-700 transition-colors"
-          >
-            Initialize Recipe
-          </button>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-secondary-700 mb-2">
-            Merged Model Name
-          </label>
-          <input
-            type="text"
-            value={mergedName}
-            onChange={(e) => setMergedName(e.target.value)}
-            className="w-full p-3 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            placeholder="Enter merged model name"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ModelSelection;

frontend/src/components/NumberInput.jsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+
+const NumberInput = ({
+  label,
+  value,
+  onChange,
+  min = 1,
+  max = 48,
+  className = "",
+  compact = false,
+}) => {
+  const [inputValue, setInputValue] = useState(value?.toString() || "");
+
+  useEffect(() => {
+    setInputValue(value?.toString() || "");
+  }, [value]);
+
+  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());
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    if (inputValue === "" || isNaN(parseInt(inputValue))) {
+      onChange(min);
+      setInputValue(min.toString());
+    }
+  };
+
+  return (
+    <div className={className}>
+      {label && (
+        <label
+          className={`block font-medium text-secondary-700 ${
+            compact ? "text-xs mb-1" : "text-sm mb-2"
+          }`}
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          type="number"
+          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 ${
+            compact ? "p-2 rounded-lg text-sm" : "p-4 rounded-xl"
+          }`}
+          min={min}
+          max={max}
+        />
+        <div
+          className={`absolute right-2 top-1/2 transform -translate-y-1/2 ${
+            compact ? "right-1" : "right-3"
+          }`}
+        >
+          <div
+            className={`text-secondary-500 bg-white px-1 py-0.5 rounded border border-secondary-200 ${
+              compact ? "text-xs px-1" : "text-xs px-2 py-1"
+            }`}
+          >
+            {min}-{max}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NumberInput;

frontend/src/components/Options.jsx

@@ -0,0 +1,309 @@
+import { useState } from "react";
+import Dropdown from "./Dropdown";
+import NumberInput from "./NumberInput";
+import InferencePopup from "./InferencePopup";
+import { setModelLayers } from "../utils/modelCookies";
+import { useAPI } from "../hooks/useAPI";
+
+const Options = ({
+  models,
+  selectedModel1,
+  selectedModel2,
+  setSelectedModel1,
+  setSelectedModel2,
+  numLayers,
+  setNumLayers,
+  layerRecipe,
+  embeddingLambdas,
+  linearLambdas,
+  setModels,
+  mergedName,
+  setMergedName,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [mergeStatus, setMergeStatus] = useState("");
+  const [isInferenceOpen, setIsInferenceOpen] = useState(false);
+  const { mergeModels, checkTaskStatus } = useAPI();
+
+  const handleMerge = async () => {
+    if (
+      !selectedModel1 ||
+      !selectedModel2 ||
+      layerRecipe.length === 0 ||
+      !mergedName.trim()
+    ) {
+      setMergeStatus(
+        "Error: Please select models, configure recipe, and provide a merged model name"
+      );
+      return;
+    }
+
+    setIsLoading(true);
+    setMergeStatus("Merging models...");
+
+    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);
+    }
+  };
+
+  return (
+    <div>
+      <div className="p-6 border-2 border-primary-200 rounded-2xl bg-gradient-to-br from-white to-primary-50 shadow-xl fixed inset-y-4 left-4 w-[25rem] overflow-y-auto">
+        <div className="flex items-center space-x-2 mb-6">
+          <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center text-white">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M14 17H5" />
+              <path d="M19 7h-9" />
+              <circle cx="17" cy="17" r="3" />
+              <circle cx="7" cy="7" r="3" />
+            </svg>
+          </div>
+          <h2 className="text-xl font-bold text-secondary-800">
+            Evolution Transformer Options
+          </h2>
+        </div>
+
+        <div className="space-y-6">
+          <Dropdown
+            label="Model 1"
+            selectedValue={selectedModel1}
+            onSelect={setSelectedModel1}
+            options={models}
+            placeholder="Select base model..."
+            loading={models.length === 0}
+            loadingMessage="Loading models..."
+            emptyMessage="No models available"
+            showSearch={true}
+            searchPlaceholder="Search models..."
+          />
+
+          <Dropdown
+            label="Model 2"
+            selectedValue={selectedModel2}
+            onSelect={setSelectedModel2}
+            options={models}
+            placeholder="Select target model..."
+            loading={models.length === 0}
+            loadingMessage="Loading models..."
+            emptyMessage="No models available"
+            showSearch={true}
+            searchPlaceholder="Search models..."
+          />
+
+          <NumberInput
+            label="Number of Layers"
+            value={numLayers}
+            onChange={setNumLayers}
+            min={1}
+            max={48}
+            className="w-full"
+          />
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1">
+              Merged Model Name
+            </label>
+            <input
+              type="text"
+              value={mergedName}
+              onChange={(e) => setMergedName(e.target.value)}
+              placeholder="Enter merged model name..."
+              className="w-full px-3 py-2 border-2 border-secondary-200 rounded-lg focus:border-primary-500 focus:ring-2 focus:ring-primary-200 text-secondary-800 placeholder-secondary-400 transition-all duration-200"
+            />
+          </div>
+
+          <div className="p-4 rounded-xl border-2 border-secondary-200 bg-secondary-50">
+            <div className="flex items-center space-x-2">
+              <div
+                className={`w-2 h-2 rounded-full ${
+                  selectedModel1 && selectedModel2
+                    ? "bg-green-500"
+                    : "bg-red-500"
+                }`}
+              ></div>
+              <span>
+                Selected:{" "}
+                {selectedModel1 && selectedModel2
+                  ? "Ready to merge"
+                  : "Incomplete"}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex space-x-3">
+            <div className="flex-1 p-4 rounded-xl border-2 border-accent-200 bg-gradient-to-br from-accent-50 to-primary-50">
+              <div className="flex items-center space-x-2 mb-3">
+                <div className="w-6 h-6 bg-gradient-to-br from-accent-500 to-secondary-500 rounded-lg flex items-center justify-center text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m8 6 4-4 4 4" />
+                    <path d="M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" />
+                    <path d="m20 22-5-5" />
+                  </svg>
+                </div>
+                <h3 className="text-sm font-semibold text-secondary-800">
+                  Merge Models
+                </h3>
+              </div>
+
+              <button
+                onClick={handleMerge}
+                disabled={
+                  isLoading ||
+                  !selectedModel1 ||
+                  !selectedModel2 ||
+                  layerRecipe.length === 0 ||
+                  !mergedName.trim()
+                }
+                className="w-full py-2.5 px-3 bg-gradient-to-r from-accent-500 to-primary-500 text-white font-medium rounded-lg hover:from-accent-600 hover:to-primary-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 text-sm"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="animate-spin w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full"></div>
+                    <span>Merging...</span>
+                  </>
+                ) : (
+                  <>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="m8 6 4-4 4 4" />
+                      <path d="M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" />
+                      <path d="m20 22-5-5" />
+                    </svg>
+                    <span>Merge</span>
+                  </>
+                )}
+              </button>
+            </div>
+
+            <div className="flex-1 p-4 rounded-xl border-2 border-primary-200 bg-gradient-to-br from-primary-50 to-accent-50">
+              <div className="flex items-center space-x-2 mb-3">
+                <div className="w-6 h-6 bg-gradient-to-br from-secondary-500 to-primary-500 rounded-lg flex items-center justify-center text-white">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                  </svg>
+                </div>
+                <h3 className="text-sm font-semibold text-secondary-800">
+                  Test Inference
+                </h3>
+              </div>
+
+              <button
+                onClick={() => setIsInferenceOpen(true)}
+                className="w-full py-2.5 px-3 bg-gradient-to-r from-secondary-500 to-primary-500 text-white font-medium rounded-lg hover:from-secondary-600 hover:to-primary-600 transition-all duration-200 flex items-center justify-center space-x-2 text-sm"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </svg>
+                <span>Inference</span>
+              </button>
+            </div>
+          </div>
+
+          {mergeStatus && (
+            <div
+              className={`p-2 rounded-lg text-sm font-medium ${
+                mergeStatus.includes("successful")
+                  ? "bg-green-100 text-green-800"
+                  : mergeStatus.includes("Error") ||
+                    mergeStatus.includes("failed")
+                  ? "bg-red-100 text-red-800"
+                  : "bg-blue-100 text-blue-800"
+              }`}
+            >
+              {mergeStatus}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <InferencePopup
+        isOpen={isInferenceOpen}
+        onClose={() => setIsInferenceOpen(false)}
+        models={models}
+      />
+    </div>
+  );
+};
+
+export default Options;

frontend/src/components/Recipe.jsx

@@ -0,0 +1,390 @@
+import { useState, useEffect, useCallback } from "react";
+import Dropdown from "./Dropdown";
+import NumberInput from "./NumberInput";
+import {
+  getModelLayerCounts,
+  initializeDefaultCookies,
+} from "../utils/modelCookies";
+
+const Recipe = ({
+  layerRecipe,
+  setLayerRecipe,
+  embeddingLambdas,
+  setEmbeddingLambdas,
+  linearLambdas,
+  setLinearLambdas,
+  numLayers,
+  selectedModel1,
+  selectedModel2,
+}) => {
+  const [modelLayerCounts, setModelLayerCounts] = useState({
+    model1: 12,
+    model2: 12,
+  });
+  const [expandedBlock, setExpandedBlock] = useState(null);
+
+  useEffect(() => {
+    initializeDefaultCookies(selectedModel1, selectedModel2);
+    const counts = getModelLayerCounts(selectedModel1, selectedModel2);
+    setModelLayerCounts(counts);
+  }, [selectedModel1, selectedModel2]);
+
+  const initializeLayerRecipe = useCallback(() => {
+    const recipe = [];
+    for (let i = 0; i < numLayers; i++) {
+      recipe.push([[1, 1, 0.5]]);
+    }
+    setLayerRecipe(recipe);
+  }, [numLayers, setLayerRecipe]);
+
+  useEffect(() => {
+    if (layerRecipe.length !== numLayers) {
+      initializeLayerRecipe();
+    }
+  }, [numLayers, layerRecipe.length, initializeLayerRecipe]);
+
+  const addBlockToLayer = (layerIndex) => {
+    const newRecipe = [...layerRecipe];
+    const newBlock = [1, 1, 0.5];
+    newRecipe[layerIndex] = [...newRecipe[layerIndex], newBlock];
+    setLayerRecipe(newRecipe);
+  };
+
+  const removeBlockFromLayer = (layerIndex, blockIndex) => {
+    const newRecipe = [...layerRecipe];
+    if (newRecipe[layerIndex].length > 1) {
+      newRecipe[layerIndex] = newRecipe[layerIndex].filter(
+        (_, i) => i !== blockIndex
+      );
+      setLayerRecipe(newRecipe);
+    }
+  };
+
+  const updateBlock = (layerIndex, blockIndex, field, value) => {
+    const newRecipe = [...layerRecipe];
+    const block = [...newRecipe[layerIndex][blockIndex]];
+
+    if (field === "model") {
+      block[0] = value;
+      block[1] = 1;
+    } else if (field === "sourceLayer") {
+      block[1] = value;
+    } else if (field === "percentage") {
+      block[2] = value / 100;
+    }
+
+    newRecipe[layerIndex][blockIndex] = block;
+    setLayerRecipe(newRecipe);
+  };
+
+  const updateEmbeddingLambda = (index, value) => {
+    const newLambdas = [...embeddingLambdas];
+    newLambdas[index] = value / 100;
+    setEmbeddingLambdas(newLambdas);
+  };
+
+  const updateLinearLambda = (index, value) => {
+    const newLambdas = [...linearLambdas];
+    newLambdas[index] = value / 100;
+    setLinearLambdas(newLambdas);
+  };
+
+  const modelOptions = [
+    { value: 1, label: "Model 1" },
+    { value: 2, label: "Model 2" },
+  ];
+
+  const getModelName = (modelValue) => {
+    return modelValue === 1 ? "Model 1" : "Model 2";
+  };
+
+  const getBlockId = (layerIndex, blockIndex) => {
+    return `${layerIndex}-${blockIndex}`;
+  };
+
+  const toggleBlockExpanded = (layerIndex, blockIndex) => {
+    const blockId = getBlockId(layerIndex, blockIndex);
+    setExpandedBlock(expandedBlock === blockId ? null : blockId);
+  };
+
+  return (
+    <div className="p-6 border-2 border-primary-200 rounded-2xl bg-gradient-to-br from-white to-primary-50 shadow-xl fixed top-4 right-4 bottom-4 left-[27rem] overflow-y-auto ">
+      <div className="flex items-center space-x-2 mb-6">
+        <div className="w-8 h-8 bg-gradient-to-br from-accent-500 to-primary-500 rounded-lg flex items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-white"
+          >
+            <path d="M12 3v18m9-9H3" />
+          </svg>
+        </div>
+        <h2 className="text-xl font-bold text-secondary-800">Layer Recipe</h2>
+      </div>
+
+      <div className="space-y-8">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold text-secondary-700">
+              Embedding Layers
+            </h3>
+            <div className="space-y-3">
+              <NumberInput
+                label="Token Embedding (%)"
+                value={Math.round(embeddingLambdas[0] * 100)}
+                onChange={(value) => updateEmbeddingLambda(0, value)}
+                min={0}
+                max={100}
+              />
+              <NumberInput
+                label="Positional Embedding (%)"
+                value={Math.round(embeddingLambdas[1] * 100)}
+                onChange={(value) => updateEmbeddingLambda(1, value)}
+                min={0}
+                max={100}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold text-secondary-700">
+              Linear Layers
+            </h3>
+            <div className="space-y-3">
+              <NumberInput
+                label="LM Head (%)"
+                value={Math.round(linearLambdas[0] * 100)}
+                onChange={(value) => updateLinearLambda(0, value)}
+                min={0}
+                max={100}
+              />
+              <NumberInput
+                label="LM Final (%)"
+                value={Math.round(linearLambdas[1] * 100)}
+                onChange={(value) => updateLinearLambda(1, value)}
+                min={0}
+                max={100}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-secondary-700">
+              Transformer Layers
+            </h3>
+            <div className="text-xs text-secondary-500 space-x-4">
+              <span>
+                Model 1:{" "}
+                {modelLayerCounts.model1 === "N/A"
+                  ? "N/A layers"
+                  : `${modelLayerCounts.model1} layers`}
+              </span>
+              <span>
+                Model 2:{" "}
+                {modelLayerCounts.model2 === "N/A"
+                  ? "N/A layers"
+                  : `${modelLayerCounts.model2} layers`}
+              </span>
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto space-y-3">
+            {layerRecipe.map((layer, layerIndex) => (
+              <div
+                key={layerIndex}
+                className="relative border-2 border-secondary-200 rounded-xl p-4 bg-white hover:border-primary-300 transition-all duration-200"
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center space-x-3">
+                    <h4 className="font-medium text-secondary-700">
+                      Layer {layerIndex + 1}
+                    </h4>
+                    <div className="text-xs text-secondary-500 bg-secondary-100 px-2 py-1 rounded-md">
+                      Total:{" "}
+                      {Math.round(
+                        layer.reduce((sum, block) => sum + block[2], 0) * 100
+                      )}
+                      %
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => addBlockToLayer(layerIndex)}
+                    className="w-6 h-6 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors duration-200 flex items-center justify-center"
+                    title="Add block"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M12 5v14m7-7H5" />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {layer.map((block, blockIndex) => {
+                    const blockId = getBlockId(layerIndex, blockIndex);
+                    const isExpanded = expandedBlock === blockId;
+                    const modelName = getModelName(block[0]);
+
+                    return (
+                      <div key={blockIndex} className="relative">
+                        <button
+                          onClick={() =>
+                            toggleBlockExpanded(layerIndex, blockIndex)
+                          }
+                          onContextMenu={(e) => {
+                            e.preventDefault();
+                            removeBlockFromLayer(layerIndex, blockIndex);
+                          }}
+                          className="px-3 py-2 bg-white border-2 border-secondary-300 rounded-lg hover:border-primary-300 hover:bg-primary-50 transition-all duration-200 text-sm font-medium text-secondary-700 flex items-center space-x-2"
+                          title="Left click to edit, Right click to delete"
+                        >
+                          <span className="text-primary-600">{modelName}</span>
+                          <span className="text-secondary-500">
+                            L{block[1]}
+                          </span>
+                          <span className="text-accent-600">
+                            {Math.round(block[2] * 100)}%
+                          </span>
+                          <svg
+                            className={`w-4 h-4 text-secondary-400 transition-transform duration-200 ${
+                              isExpanded ? "rotate-180" : ""
+                            }`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </button>
+
+                        {isExpanded && (
+                          <div
+                            className="absolute top-full left-0 mt-1 p-3 bg-white border-2 border-primary-200 rounded-lg shadow-lg z-10 min-w-64"
+                            data-block-id={blockId}
+                          >
+                            <div className="space-y-3">
+                              <div>
+                                <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                  Model
+                                </label>
+                                <Dropdown
+                                  selectedValue={modelOptions.find(
+                                    (opt) => opt.value === block[0]
+                                  )}
+                                  onSelect={(option) => {
+                                    updateBlock(
+                                      layerIndex,
+                                      blockIndex,
+                                      "model",
+                                      option.value
+                                    );
+                                  }}
+                                  options={modelOptions}
+                                  placeholder="Select model..."
+                                  className="w-full"
+                                />
+                              </div>
+
+                              <div className="grid grid-cols-2 gap-3">
+                                <div>
+                                  <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                    Layer
+                                  </label>
+                                  <NumberInput
+                                    value={block[1]}
+                                    onChange={(value) =>
+                                      updateBlock(
+                                        layerIndex,
+                                        blockIndex,
+                                        "sourceLayer",
+                                        value
+                                      )
+                                    }
+                                    min={1}
+                                    max={
+                                      block[0] === 1
+                                        ? modelLayerCounts.model1 === "N/A"
+                                          ? 1
+                                          : modelLayerCounts.model1
+                                        : modelLayerCounts.model2 === "N/A"
+                                        ? 1
+                                        : modelLayerCounts.model2
+                                    }
+                                    compact={true}
+                                  />
+                                </div>
+
+                                <div>
+                                  <label className="block text-xs font-medium text-secondary-600 mb-1">
+                                    Weight (%)
+                                  </label>
+                                  <NumberInput
+                                    value={Math.round(block[2] * 100)}
+                                    onChange={(value) =>
+                                      updateBlock(
+                                        layerIndex,
+                                        blockIndex,
+                                        "percentage",
+                                        value
+                                      )
+                                    }
+                                    min={0}
+                                    max={100}
+                                    compact={true}
+                                  />
+                                </div>
+                              </div>
+
+                              {layer.length > 1 && (
+                                <button
+                                  onClick={() => {
+                                    removeBlockFromLayer(
+                                      layerIndex,
+                                      blockIndex
+                                    );
+                                    setExpandedBlock(null);
+                                  }}
+                                  className="w-full px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors duration-200 text-sm font-medium"
+                                >
+                                  Remove Block
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Recipe;

frontend/src/hooks/useAPI.js

@@ -47,9 +47,25 @@ export const useAPI = () => {
     }
   }, []);
 
+  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;
+    }
+  }, []);
+
   return {
     checkTaskStatus,
     fetchModels,
     mergeModels,
+    inference,
   };
 };

frontend/src/index.css

@@ -1,5 +1,40 @@
 @import "tailwindcss";
 
+@theme {
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-400: #94a3b8;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+
+  --color-accent-50: #f0fdf4;
+  --color-accent-100: #dcfce7;
+  --color-accent-200: #bbf7d0;
+  --color-accent-300: #86efac;
+  --color-accent-400: #4ade80;
+  --color-accent-500: #22c55e;
+  --color-accent-600: #16a34a;
+  --color-accent-700: #15803d;
+  --color-accent-800: #166534;
+  --color-accent-900: #14532d;
+}
+
 :root {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu,
     Cantarell, sans-serif;
@@ -15,5 +50,35 @@
 body {
   margin: 0;
   padding: 0;
-  min-height: 100vh;
+}
+
+/* Custom Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-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 {
+  background: transparent;
+}
+
+/* Firefox scrollbar styling */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #0ea5e9 transparent;
 }

frontend/src/utils/modelCookies.js

@@ -0,0 +1,47 @@
+export const getModelLayers = (modelKey) => {
+  const cookieValue = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(`${modelKey}_layers=`))
+    ?.split("=")[1];
+
+  return cookieValue ? parseInt(cookieValue) : null;
+};
+
+export const setModelLayers = (modelKey, numLayers) => {
+  document.cookie = `${modelKey}_layers=${numLayers}`;
+};
+
+/**
+ * Get layer counts using actual model names as keys
+ * Returns "N/A" if no model is selected, otherwise returns stored count or default
+ */
+export const getModelLayerCounts = (selectedModel1, selectedModel2) => {
+  const model1Layers = selectedModel1 ? getModelLayers(selectedModel1) : null;
+  const model2Layers = selectedModel2 ? getModelLayers(selectedModel2) : null;
+
+  return {
+    model1: !selectedModel1 ? "N/A" : model1Layers !== null ? model1Layers : 12,
+    model2: !selectedModel2 ? "N/A" : model2Layers !== null ? model2Layers : 12,
+  };
+};
+
+/**
+ * Set layer count for a model using its actual name as the key
+ */
+export const setModelLayersByName = (modelName, numLayers) => {
+  if (modelName) {
+    setModelLayers(modelName, numLayers);
+  }
+};
+
+/**
+ * Initialize default layer counts using actual model names as keys
+ */
+export const initializeDefaultCookies = (selectedModel1, selectedModel2) => {
+  if (selectedModel1 && getModelLayers(selectedModel1) === null) {
+    setModelLayers(selectedModel1, 24);
+  }
+  if (selectedModel2 && getModelLayers(selectedModel2) === null) {
+    setModelLayers(selectedModel2, 36);
+  }
+};

frontend/tailwind.config.js

@@ -1,47 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: "#f0f9ff",
-          100: "#e0f2fe",
-          200: "#bae6fd",
-          300: "#7dd3fc",
-          400: "#38bdf8",
-          500: "#0ea5e9",
-          600: "#0284c7",
-          700: "#0369a1",
-          800: "#075985",
-          900: "#0c4a6e",
-        },
-        secondary: {
-          50: "#f8fafc",
-          100: "#f1f5f9",
-          200: "#e2e8f0",
-          300: "#cbd5e1",
-          400: "#94a3b8",
-          500: "#64748b",
-          600: "#475569",
-          700: "#334155",
-          800: "#1e293b",
-          900: "#0f172a",
-        },
-        accent: {
-          50: "#f0fdf4",
-          100: "#dcfce7",
-          200: "#bbf7d0",
-          300: "#86efac",
-          400: "#4ade80",
-          500: "#22c55e",
-          600: "#16a34a",
-          700: "#15803d",
-          800: "#166534",
-          900: "#14532d",
-        },
-      },
-    },
-  },
-  plugins: [],
-};