Update src/App.js

src/App.js

@@ -1,23 +1,84 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import "./App.css";
 
 function App() {
+
+  const API = "https://<YOUR_SPACE_NAME>.hf.space";
+
+  const [image, setImage] = useState(null);
+  const [analysis, setAnalysis] = useState(null);
+  const [question, setQuestion] = useState("");
+  const [answer, setAnswer] = useState("");
+
+  async function uploadImage(e) {
+    const file = e.target.files[0];
+    setImage(URL.createObjectURL(file));
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const res = await fetch(`${API}/analyze-image/`, {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await res.json();
+    setAnalysis(data);
+  }
+
+  async function askAI() {
+    const res = await fetch(`${API}/ask-ai/`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        wound: analysis.wound_label,
+        skin: analysis.skin_label,
+        question: question,
+      }),
+    });
+
+    const data = await res.json();
+    setAnswer(data.reply);
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="container">
+
+      <h1>🩺 Medical Diagnosis + AI Assistant</h1>
+
+      <input type="file" accept="image/*" onChange={uploadImage} />
+
+      {image && <img src={image} alt="Uploaded" className="preview" />}
+
+      {analysis && (
+        <div className="results">
+          <h2>Detection Results</h2>
+          <p><b>Wound Type:</b> {analysis.wound_label}</p>
+          <p><b>Skin Disease:</b> {analysis.skin_label}</p>
+        </div>
+      )}
+
+      {analysis && (
+        <>
+          <h2>Ask a Medical Question</h2>
+          
+          <input
+            type="text"
+            placeholder="Ask something..."
+            onChange={(e) => setQuestion(e.target.value)}
+          />
+
+          <button onClick={askAI}>Ask</button>
+
+          {answer && (
+            <div className="answer-box">
+              <h3>AI Response</h3>
+              <p>{answer}</p>
+            </div>
+          )}
+        </>
+      )}
+
     </div>
   );
 }