Optimize frontend rendering, CSS, and backend history caching

.gitignore

@@ -33,3 +33,12 @@ lerna-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# python / environments
+.venv/
+venv/
+
+# temporary files
+temp.txt
+.tmp
+scratch/

server.mjs

@@ -82,17 +82,22 @@ console.log(`[startup] Listening on:  http://0.0.0.0:${PORT}`);
 // History helpers
 // ──────────────────────────────────────────────────────────────────────────────
 
+let historyCache = null;
+
 async function readHistory() {
+  if (historyCache !== null) return historyCache;
   try {
     const raw = await readFile(HISTORY_FILE, 'utf-8');
     const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
+    historyCache = Array.isArray(parsed) ? parsed : [];
   } catch {
-    return [];
+    historyCache = [];
   }
+  return historyCache;
 }
 
 async function writeHistory(entries) {
+  historyCache = entries;
   await writeFile(HISTORY_FILE, JSON.stringify(entries, null, 2), 'utf-8');
 }
 
@@ -401,7 +406,7 @@ async function handleStyleRandom(req, res) {
         { role: 'system', content: buildStylePrompt(mode, idea) },
         { role: 'user', content: userMsg },
       ],
-      { max_tokens: 800 },
+      { max_tokens: 8192 },
       signal,
     );
     const style = cleanStyleString(content);
@@ -495,7 +500,7 @@ async function handleGenerate(req, res) {
           { role: 'system', content: buildSystemPrompt(body) },
           { role: 'user', content: buildUserMessage(body) },
         ],
-        { max_tokens: 4000 },
+        { max_tokens: 32768 },
         signal,
       );
 

src/App.tsx

@@ -1,20 +1,24 @@
+import { Suspense, lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { HomePage } from './pages/HomePage';
-import { SettingsPage } from './pages/SettingsPage';
 import { ToastProvider } from './lib/toast';
 import { I18nProvider } from './lib/i18n';
 import { ThemeProvider } from './lib/theme';
 
+const HomePage = lazy(() => import('./pages/HomePage').then(module => ({ default: module.HomePage })));
+const SettingsPage = lazy(() => import('./pages/SettingsPage').then(module => ({ default: module.SettingsPage })));
+
 export default function App() {
   return (
     <ThemeProvider>
       <I18nProvider>
         <ToastProvider>
+          <Suspense fallback={<div className="h-screen w-screen flex items-center justify-center bg-bg"><div className="w-8 h-8 rounded-full border-4 border-accent-primary border-t-transparent animate-spin" /></div>}>
             <Routes>
               <Route path="/" element={<HomePage />} />
               <Route path="/settings" element={<SettingsPage />} />
               <Route path="*" element={<HomePage />} />
             </Routes>
+          </Suspense>
         </ToastProvider>
       </I18nProvider>
     </ThemeProvider>

src/components/InputPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent, type KeyboardEvent } from "react";
+import { useState, useEffect, type FormEvent, type KeyboardEvent } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faCircleNotch,
@@ -51,7 +51,8 @@ const CRAZY_PAIRS: { idea: string; style: string; mood: string; vocals: Vocals }
 ];
 
 interface InputPanelProps {
-  values: InputValues;
+  initialValues: InputValues;
+  forcedUpdate?: { count: number; values: InputValues };
   onChange: (next: InputValues) => void;
   onSubmit: () => void;
   loading: boolean;
@@ -60,19 +61,32 @@ interface InputPanelProps {
 }
 
 export function InputPanel({
-  values,
+  initialValues,
+  forcedUpdate,
   onChange,
   onSubmit,
   loading,
   disabled,
   cancelButton,
 }: InputPanelProps) {
+  const [values, setValues] = useState<InputValues>(initialValues);
   const [styleLoading, setStyleLoading] = useState<null | "normal" | "crazy">(null);
   const elapsed = useElapsed(loading);
   const { t } = useI18n();
 
-  const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) =>
+  // Handle external updates (e.g. from loading history)
-    onChange({ ...values, [key]: value });
+  useEffect(() => {
+    if (forcedUpdate && forcedUpdate.count > 0) {
+      setValues(forcedUpdate.values);
+      onChange(forcedUpdate.values);
+    }
+  }, [forcedUpdate, onChange]);
+
+  const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) => {
+    const next = { ...values, [key]: value };
+    setValues(next);
+    onChange(next);
+  };
 
   const canSubmit = !loading && !disabled && values.idea.trim().length > 0;
 
@@ -99,22 +113,26 @@ export function InputPanel({
     setStyleLoading("normal");
     try {
       const style = await randomStyle("normal", ctrl.signal, ideaToUse);
-      onChange({ 
+      const nextValues = { 
         ...values, 
         idea: ideaToUse, 
         style_hint: style, 
         mood: hasIdea ? values.mood : ex.mood, 
         vocals: hasIdea ? values.vocals : ex.vocals 
-      });
+      };
+      setValues(nextValues);
+      onChange(nextValues);
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;
-      onChange({ 
+      const nextValues = { 
         ...values, 
         idea: ideaToUse, 
         style_hint: hasIdea ? values.style_hint : ex.style, 
         mood: hasIdea ? values.mood : ex.mood, 
         vocals: hasIdea ? values.vocals : ex.vocals 
-      });
+      };
+      setValues(nextValues);
+      onChange(nextValues);
     } finally {
       setStyleLoading((curr) => (curr === "normal" ? null : curr));
     }
@@ -131,22 +149,26 @@ export function InputPanel({
     setStyleLoading("crazy");
     try {
       const style = await randomStyle("crazy", ctrl.signal, ideaToUse);
-      onChange({ 
+      const nextValues = { 
         ...values, 
         idea: ideaToUse, 
         style_hint: style, 
         mood: hasIdea ? values.mood : ex.mood, 
         vocals: hasIdea ? values.vocals : ex.vocals 
-      });
+      };
+      setValues(nextValues);
+      onChange(nextValues);
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;
-      onChange({ 
+      const nextValues = { 
         ...values, 
         idea: ideaToUse, 
         style_hint: hasIdea ? values.style_hint : ex.style, 
         mood: hasIdea ? values.mood : ex.mood, 
         vocals: hasIdea ? values.vocals : ex.vocals 
-      });
+      };
+      setValues(nextValues);
+      onChange(nextValues);
     } finally {
       setStyleLoading((curr) => (curr === "crazy" ? null : curr));
     }

src/components/cards/VideoPromptsCard.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ResultCard } from "../ResultCard";
 import { CopyButton } from "../CopyButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faVideo, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faVideo, faUndo, faStar } from "@fortawesome/free-solid-svg-icons";
 import { useAutoHeight } from "../../lib/useAutoHeight";
 import {
   NEGATIVE_VIDEO_PROMPT,
@@ -151,18 +151,30 @@ export function VideoPromptsCard({
 
           {links && links.length > 0 && (
             <div className="pt-2 flex flex-wrap gap-2">
-              {links.map((link, i) => (
+              {links.map((link, i) => {
+                const isRecommended = Boolean(
+                  current.tool_recommendation &&
+                  current.tool_recommendation.toLowerCase().includes(link.name.toLowerCase())
+                );
+                
+                return (
                   <button
                     key={i}
                     type="button"
                     onClick={() => handleToolClick(link.url)}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-accent-primary/10 text-accent-primary hover:bg-accent-primary hover:text-white transition-all duration-150 border border-accent-primary/20 hover:border-accent-primary"
+                    className={
-                  title={`Copy prompt and open ${link.name}`}
+                      isRecommended
+                        ? "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-accent-primary text-white shadow-lg shadow-accent-primary/30 transition-all duration-150 border border-accent-primary hover:bg-accent-primary/90"
+                        : "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wide bg-bg-card text-fg-muted hover:text-fg hover:bg-bg-hover transition-all duration-150 border border-border hover:border-accent-primary/40"
+                    }
+                    title={isRecommended ? `Recommended! Copy prompt and open ${link.name}` : `Copy prompt and open ${link.name}`}
                   >
+                    {isRecommended && <FontAwesomeIcon icon={faStar} className="w-3 h-3 text-yellow-300" />}
                     {link.name}
-                  <FontAwesomeIcon icon={faExternalLinkAlt} className="w-3 h-3" />
+                    <FontAwesomeIcon icon={faExternalLinkAlt} className={isRecommended ? "w-3 h-3 opacity-90" : "w-3 h-3 opacity-60"} />
                   </button>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>

src/index.css

@@ -192,18 +192,21 @@
         position: fixed; top: -20%; left: -15%; width: 70vw; height: 70vw;
         background: radial-gradient(circle, var(--accent-primary) 0%, transparent 65%);
         opacity: 0.18; filter: blur(130px); z-index: -1; pointer-events: none;
+        will-change: transform;
         animation: blob-drift-1 18s ease-in-out infinite;
     }
     .liquid-blob-2 {
         position: fixed; bottom: -20%; right: -15%; width: 65vw; height: 65vw;
         background: radial-gradient(circle, var(--accent-secondary) 0%, transparent 65%);
         opacity: 0.18; filter: blur(130px); z-index: -1; pointer-events: none;
+        will-change: transform;
         animation: blob-drift-2 22s ease-in-out infinite;
     }
     .liquid-blob-3 {
         position: fixed; top: 30%; right: 20%; width: 40vw; height: 40vw;
         background: radial-gradient(circle, var(--accent-warm) 0%, transparent 65%);
         opacity: 0.10; filter: blur(100px); z-index: -1; pointer-events: none;
+        will-change: transform;
         animation: blob-drift-3 26s ease-in-out infinite;
     }
 

src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faYoutube } from "@fortawesome/free-brands-svg-icons";
-import { faLightbulb, faMoon, faHistory, faCog } from "@fortawesome/free-solid-svg-icons";
+import { faLightbulb, faMoon, faHistory, faCog, faRobot } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router-dom";
 import { InputPanel } from "../components/InputPanel";
 import type { InputValues } from "../components/InputPanel";
@@ -26,7 +26,6 @@ import { useI18n } from "../lib/i18n";
 import { useTheme } from "../lib/theme";
 
 const DRAFT_KEY = "melodymuse-draft";
-const DRAFT_DEBOUNCE_MS = 400;
 
 const DEFAULT_INPUT: InputValues = {
   idea: "",
@@ -103,9 +102,8 @@ export function HomePage() {
   const { t, lang, setLang } = useI18n();
   const { theme, toggleTheme } = useTheme();
 
-  const [input, setInput] = useState<InputValues>(
+  const inputRef = useRef<InputValues>(loadDraft() ?? DEFAULT_INPUT);
-    () => loadDraft() ?? DEFAULT_INPUT,
+  const [forcedUpdate, setForcedUpdate] = useState<{ count: number; values: InputValues }>();
-  );
   const [assets, setAssets] = useState<SongAssets | null>(null);
   const [originalAssets, setOriginalAssets] = useState<SongAssets | null>(null);
   const [loading, setLoading] = useState(false);
@@ -119,14 +117,14 @@ export function HomePage() {
   const abortRef = useRef<AbortController | null>(null);
   const anyRegenerating = isAnyBusy(loading, regenerating);
 
-  // Save draft
+  // Save draft periodically
   useEffect(() => {
-    const id = window.setTimeout(() => {
+    const id = window.setInterval(() => {
-      try { window.localStorage.setItem(DRAFT_KEY, JSON.stringify(input)); }
+      try { window.localStorage.setItem(DRAFT_KEY, JSON.stringify(inputRef.current)); }
       catch { /* ignore */ }
-    }, DRAFT_DEBOUNCE_MS);
+    }, 1000);
-    return () => window.clearTimeout(id);
+    return () => window.clearInterval(id);
-  }, [input]);
+  }, []);
 
   // Server health check
   useEffect(() => {
@@ -168,7 +166,9 @@ export function HomePage() {
   }, [anyRegenerating, cancel]);
 
   const buildRequest = useCallback(
-    (section: string, extra: Record<string, unknown> = {}): GenerateCall => ({
+    (section: string, extra: Record<string, unknown> = {}): GenerateCall => {
+      const input = inputRef.current;
+      return {
         input: input.idea.trim(),
         language: resolveLanguage(input),
         ...(input.mood.trim() ? { mood: input.mood.trim() } : {}),
@@ -176,8 +176,9 @@ export function HomePage() {
         vocals: input.vocals,
         section,
         ...extra,
-    } as unknown as GenerateCall),
+      } as unknown as GenerateCall;
-    [input],
+    },
+    [],
   );
 
   const runGeneration = useCallback(
@@ -212,6 +213,7 @@ export function HomePage() {
   );
 
   const handleGenerate = useCallback(async () => {
+    const input = inputRef.current;
     if (!input.idea.trim()) return;
     setAssets(null);
     setOriginalAssets(null);
@@ -228,9 +230,10 @@ export function HomePage() {
       setLoading,
       t.assetsGenerated,
     );
-  }, [input, buildRequest, runGeneration, t]);
+  }, [buildRequest, runGeneration, t]);
 
   const handleRegenerateAll = useCallback(async () => {
+    const input = inputRef.current;
     if (!input.idea.trim()) return;
     setAssets(null);
     setOriginalAssets(null);
@@ -250,10 +253,11 @@ export function HomePage() {
       },
       t.regeneratedAll,
     );
-  }, [input, buildRequest, runGeneration, t]);
+  }, [buildRequest, runGeneration, t]);
 
   const handleRegenerateSection = useCallback(
     async (section: SectionKey, selectedText?: string) => {
+      const input = inputRef.current;
       if (!input.idea.trim() || !assets) return;
       
       const isPartialLyrics = section === "lyrics" && !!selectedText;
@@ -299,7 +303,7 @@ export function HomePage() {
         `${t.regeneratedSection} ${SECTION_LABELS[section]}`,
       );
     },
-    [input, assets, buildRequest, runGeneration, t],
+    [assets, buildRequest, runGeneration, t],
   );
 
   // Execute chained regeneration
@@ -345,7 +349,8 @@ export function HomePage() {
   const handleLoadHistory = useCallback(
     (entry: HistoryEntry) => {
       if (anyRegenerating) cancel();
-      setInput(entry.input);
+      inputRef.current = entry.input;
+      setForcedUpdate((prev) => ({ count: (prev?.count ?? 0) + 1, values: entry.input }));
       setAssets(entry.assets);
       setOriginalAssets(entry.assets);
       setSelectedTitleIndex(0);
@@ -386,6 +391,15 @@ export function HomePage() {
               >
                 Suno
               </a>
+              <a
+                href="https://chat.orfel.de/c/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-8 h-8 flex items-center justify-center rounded-lg text-fg-muted hover:text-blue-400 hover:bg-blue-400/10 transition-all duration-150"
+                title="Open Chat AI"
+              >
+                <FontAwesomeIcon icon={faRobot} className="w-4 h-4" />
+              </a>
               <a
                 href="https://www.youtube.com/@AIWentNonsense"
                 target="_blank"
@@ -477,8 +491,9 @@ export function HomePage() {
         <div className="w-full md:w-[340px] xl:w-[380px] shrink-0 flex flex-col">
           <div className="card p-4 flex flex-col flex-none md:flex-1 min-h-0">
             <InputPanel
-              values={input}
+              initialValues={inputRef.current}
-              onChange={setInput}
+              forcedUpdate={forcedUpdate}
+              onChange={(next) => { inputRef.current = next; }}
               onSubmit={handleGenerate}
               loading={loading}
               disabled={anyRegenerating}

test_minimax.mjs

@@ -0,0 +1,26 @@
+import { createServer } from 'node:http';
+
+async function test() {
+  const LLM_ENDPOINT = 'https://api.minimax.io/v1';
+  const LLM_API_KEY = process.env.MINIMAX_API_KEY;
+  const LLM_MODEL = 'MiniMax-M3';
+
+  const resp = await fetch(LLM_ENDPOINT + '/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${LLM_API_KEY}`
+    },
+    body: JSON.stringify({
+      model: LLM_MODEL,
+      max_tokens: 120,
+      messages: [
+        { role: 'system', content: 'You are a Suno style-prompt generator.' },
+        { role: 'user', content: 'Generate one style description now.' }
+      ]
+    })
+  });
+  const data = await resp.json();
+  console.log(JSON.stringify(data.choices?.[0]?.message?.content));
+}
+test().catch(console.error);

test_minimax_crazy.mjs

@@ -0,0 +1,46 @@
+import { createServer } from 'node:http';
+
+async function test() {
+  const LLM_ENDPOINT = 'https://api.minimax.io/v1';
+  const LLM_API_KEY = process.env.MINIMAX_API_KEY;
+  const LLM_MODEL = 'MiniMax-M3';
+
+  const resp = await fetch(LLM_ENDPOINT + '/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${LLM_API_KEY}`
+    },
+    body: JSON.stringify({
+      model: LLM_MODEL,
+      max_tokens: 120,
+      messages: [
+        { role: 'system', content: `You are a Suno style-prompt generator with permission to break conventions.
+
+Output ONE short Suno style description.
+
+Requirements:
+- DELIBERATELY combine genres, eras, or instruments that don't normally mix.
+- If the user provides a music idea, use it as a jumping-off point for an
+  unexpected, surprising twist on that idea.
+- The combination should still be parseable by Suno: use real instrument and
+  genre names, include a BPM, mention a vocal style.
+- Comma-separated keywords. No sentences, no bullet points, no labels.
+- Maximum 25 words.
+- Output ONLY the style description line — no quotes, no commentary, no prefix,
+  no trailing punctuation.
+
+Examples of the expected output (do NOT copy these verbatim):
+- gregorian chant trap, deep male choir, sub 808s, 140 BPM, dark reverb
+- baroque chamber orchestra meets dubstep, cellos, glitch drops, 160 BPM
+- lo-fi mariachi breakcore, trumpets, chopped breaks, 90 BPM, vinyl crackle
+- medieval lute and drum & bass, fingerpicked strings, reese bass, 174 BPM
+- tuvan throat singing over tropical house, guttural vocals, marimba, 120 BPM` },
+        { role: 'user', content: 'Generate one style description now.' }
+      ]
+    })
+  });
+  const data = await resp.json();
+  console.log(JSON.stringify(data.choices?.[0]?.message?.content));
+}
+test().catch(console.error);