File size: 2,794 Bytes
dbc4e43 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
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;
|