Rename app.js to App.js

App.js

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [prompt, setPrompt] = useState("");
+  const [image, setImage] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async (isPremium) => {
+    setLoading(true);
+    try {
+      const response = await fetch("http://localhost:5000/generate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ prompt, premium: isPremium }),
+      });
+      const data = await response.json();
+      setImage(data.image_url);
+    } catch (error) {
+      console.error("Görsel oluşturulurken hata oluştu:", error);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="app-container">
+      {/* HEADER */}
+      <header className="header">
+        <div className="logo">Logo</div>
+        <div className="header-right">
+          <div className="new-project">
+            <span className="new-project-text">Yeni Proje</span>
+            <span className="new-project-icon">+</span>
+          </div>
+          <div className="profile">
+            <img src="profile.jpg" alt="Profile" className="profile-pic" />
+          </div>
+        </div>
+      </header>
+      
+      {/* SOL PANEL */}
+      <div className="side-panel">
+        <label>Toplam Alan (m²)</label>
+        <input type="number" placeholder="Örn: 100" />
+
+        <label>Yatak Odası</label>
+        <input type="number" placeholder="0" />
+
+        <label>Banyo</label>
+        <input type="number" placeholder="0" />
+
+        <label>Mutfak</label>
+        <input type="number" placeholder="0" />
+
+        <label>Oturma Odası</label>
+        <input type="number" placeholder="0" />
+
+        <label>Yemek Odası</label>
+        <input type="number" placeholder="0" />
+
+        <label>Giriş</label>
+        <input type="number" placeholder="0" />
+
+        <label>Garaj</label>
+        <input type="number" placeholder="0" />
+
+        {/* PROMPT ALANI */}
+        <textarea
+          placeholder="Özel isteğinizi buraya yazın..."
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+        ></textarea>
+
+        {/* BUTONLAR */}
+        <div className="buttons">
+          <button onClick={() => handleGenerate(false)}>Oluştur</button>
+          <button className="premium-button" onClick={() => handleGenerate(true)}>
+            Yükselt <span className="lock-icon">🔒</span>
+          </button>
+        </div>
+      </div>
+
+      {/* GÖRSEL ALANI */}
+      <div className="image-container">
+        {loading && <p>Görsel oluşturuluyor...</p>}
+        {image && <img src={`data:image/png;base64,${image}`} alt="Generated Floor Plan" />}
+      </div>
+    </div>
+  );
+}
+
+export default App;