.env

app.py

@@ -1,6 +1,129 @@
-import gradio as gr
+// FLOWER AI Uygulaması - Grok klonu
+// Framework: React + Tailwind + Hugging Face API
+// Kod tam sayfa layout, model seçimi ve konuşma sistemi ile hazırlandı
 
-def cevapla(soru):
-    return f"Sen dedin ki: {soru}"
+import React, { useState, useEffect, useRef } from "react";
+import { InferenceClient } from "@huggingface/inference";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Mic, Paperclip, Sparkles, Brain } from "lucide-react";
+import Editor from "@monaco-editor/react";
 
-gr.Interface(fn=cevapla, inputs="text", outputs="text", title="Mini Chatbot").launch()
+const client = new InferenceClient(process.env.NEXT_PUBLIC_HF_TOKEN);
+
+const models = {
+  "Flower Chat": "openai/gpt-oss-20b",
+  "Flower Coder": "Qwen/Qwen3-Coder-30B-A3B-Instruct",
+  "Flower MULTI": "moonshotai/Kimi-K2-Instruct"
+};
+
+export default function FlowerApp() {
+  const [model, setModel] = useState("Flower Chat");
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState([]);
+  const [thinking, setThinking] = useState(false);
+  const [codeOutput, setCodeOutput] = useState("");
+  const chatEndRef = useRef(null);
+
+  const sendMessage = async () => {
+    if (!input.trim()) return;
+    const userMessage = { role: "user", content: input };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setThinking(true);
+
+    try {
+      const response = await client.chatCompletion({
+        provider: "auto",
+        model: models[model],
+        messages: [...messages, userMessage]
+      });
+      const reply = response.choices[0].message;
+      setMessages((prev) => [...prev, reply]);
+      if (model === "Flower Coder") setCodeOutput(reply.content);
+    } catch (err) {
+      setMessages((prev) => [...prev, { role: "system", content: "❌ Hata: " + err.message }]);
+    }
+    setThinking(false);
+  };
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden">
+      {/* Sidebar */}
+      <div className="w-[280px] bg-white flex flex-col justify-between p-4 border-r">
+        <div>
+          <Button className="w-full mb-4">+ Yeni Sohbet</Button>
+          {/* Geçmiş Sohbetler */}
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button variant="ghost">🖼 Resmi Düzenle</Button>
+          <Button variant="ghost">📰 Son Dakika Haberleri</Button>
+          <Button variant="ghost">🎭 Kişilikler</Button>
+        </div>
+      </div>
+
+      {/* Ana Alan */}
+      <div className="flex-1 flex flex-col relative bg-gradient-to-b from-[--flower11] to-[--flower14]">
+        {/* Üst Logo */}
+        <div className="text-center text-4xl font-bold py-6">Flower</div>
+
+        {/* Mesajlar */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {messages.map((msg, i) => (
+            <Card key={i} className={`p-4 w-fit ${msg.role === "user" ? "ml-auto bg-flower3" : "mr-auto bg-white"}`}>
+              {msg.content}
+            </Card>
+          ))}
+          {thinking && (
+            <Card className="mr-auto bg-white p-4 animate-pulse">🤔 Düşünüyor...</Card>
+          )}
+          <div ref={chatEndRef} />
+        </div>
+
+        {/* Alt Giriş Alanı */}
+        <div className="p-4 border-t flex items-center gap-2">
+          <Paperclip className="w-5 h-5" />
+          <Button variant="outline" className="text-sm">DeepSearch</Button>
+          <Button variant="outline" className="text-sm">Think</Button>
+          <Textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Ne bilmek istiyorsun?"
+            className="flex-1 resize-none h-[56px] rounded-full border px-4 py-2 text-[16px]"
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">{model} ▼</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {Object.keys(models).map((m) => (
+                <DropdownMenuItem key={m} onSelect={() => setModel(m)}>
+                  {model === m ? "●" : "○"} {m}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Mic className="w-5 h-5" />
+        </div>
+      </div>
+
+      {/* Sağ Kod Paneli */}
+      {model === "Flower Coder" && (
+        <div className="w-[400px] bg-white border-l p-4 overflow-y-auto">
+          <Editor
+            height="100%"
+            defaultLanguage="javascript"
+            defaultValue={codeOutput || "// Kod burada görüntülenecek..."}
+            theme="vs-light"
+          />
+        </div>
+      )}
+    </div>
+  );
+}