App-AI-POC.jsx

const AppAiTest = () => {
  const generateAI = async (prompt) => {
    const res = await fetch("http://localhost:11434/api/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gemma3:latest",
        prompt: prompt,
        stream: false,
      }),
    });

    const data = await res.json();
    return data.response;
  };

  const aiCss = async (prompt) => {
    return await generateAI(`
You are a CSS/Tailwind generator.
Your task is to return only valid Tailwind CSS classes, nothing else.

RULES:
- Do not include explanations, markdown, or code blocks.
- Return only Tailwind CSS utility classes as plain text.
- Classes must describe the styling based on the user’s request.
- Always aim for a modern, elegant and responsive design.
- Avoid overly repetitive or conflicting classes.

USER PROMPT: ${prompt}
    `);
  };

  const [mainBox, setMainBox] = React.useState("");
  const [headerBox, setHeaderBox] = React.useState("");

  React.useEffect(() => {
    (async () => {
      setMainBox(await aiCss("to ma byc glowny box, rozciagniety na cala strone"));
      setHeaderBox(await aiCss("to jest naglowek"));
    })();
  }, []);

  return (
    <div className={mainBox || "w-screen h-screen flex items-center justify-center"}>
      <div className={headerBox || "text-2xl font-bold"}>Najladniejsza strona na swiecie?</div>
    </div>
  );
};