test

FastAPI/app/api.py

@@ -1,27 +1,35 @@
-from fastapi import FastAPI
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi import FastAPI, Query
 from fastapi.middleware.cors import CORSMiddleware
-
+from fastapi.staticfiles import StaticFiles
 
 app = FastAPI()
 
+# CORS setup
 origins = [
     "http://localhost:3000",
-    "localhost:3000",
-    "https://abadesalex-emb-rep.hf.space",
+    "http://localhost:8000",
+    "localhost:8000",
+    "https://your-space-name.hf.space",
 ]
-
 app.add_middleware(
     CORSMiddleware,
     allow_origins=origins,
     allow_credentials=True,
     allow_methods=["*"],
-    allow_headers=["*"]
+    allow_headers=["*"],
 )
 
-app.mount("/", StaticFiles(directory="app/build", html=True), name="static")
+# Mount static files
+app.mount("/static", StaticFiles(directory="app/build", html=True), name="static")
+
+
+# Define API route
+@app.get("/api/sum_of_lengths")
+def sum_of_lengths(word1: str = Query(...), word2: str = Query(...)):
+    return {"sum": len(word1) + len(word2)}
+
+
+if __name__ == "__main__":
+    import uvicorn
 
-# @app.get("/")
-# def index() -> FileResponse:
-#     return FileResponse(path="/app/build/index.html", media_type="text/html")
+    uvicorn.run(app, host="0.0.0.0", port=8000)

my-app/src/App.js

@@ -1,74 +1,53 @@
-import { Button, Grid, TextField } from "@mui/material";
-import { useState } from "react";
-import "./App.css";
+import React, { useState } from "react";
 
-function App() {
-  const [message, setMessage] = useState("");
+const App = () => {
   const [wordOne, setWordOne] = useState("");
-
-  const onChangeWordOne = (event) => {
-    const newWord = event.target.value;
-    console.log("Word One: ", newWord);
-    setWordOne(newWord);
-  };
+  const [wordTwo, setWordTwo] = useState("");
+  const [message, setMessage] = useState("");
 
   const onPressButton = () => {
-    setMessage('Pau chupapijas');
-    // console.log("Word One: ", wordOne);
-    // const url = "http://127.0.0.1:8000/test";
-    const url = "https://abadesalex-emb-rep.hf.space/test";
-    // const dataToSend = JSON.stringify({ message: wordOne });
-    // fetch(url, {
-    //   method: "POST", // Specifying the method
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: dataToSend, // Data must be a stringified JSON
-    // })
-    //   .then((response) => response.json())
-    //   .then((data) => setMessage(data.Hello))
-    //   .catch((error) => console.error("Error:", error));
+    // Construct the URL with query parameters
+    //const url = `https://abadesalex-emb-rep.hf.space/api/sum_of_lengths?word1=${wordOne}&word2=${wordTwo}`;
+    const url = `http://localhost:8000/api/sum_of_lengths?word1=${wordOne}&word2=${wordTwo}`;
+
+    fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.sum !== undefined) {
+          setMessage(`Sum of lengths: ${data.sum}`);
+        } else {
+          setMessage("Error: Unexpected response");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+        setMessage("Error: Failed to fetch data");
+      });
   };
 
   return (
-    <>
-      <Grid container mt={2} mr={2} ml={2} textAlign={"center"} spacing={2}>
-        <Grid item xs={3}>
-          <TextField
-            id="word-one"
-            label="Word 1"
-            variant="outlined"
-            onChange={onChangeWordOne}
-            fullWidth
-          />
-        </Grid>
-
-        <Grid item xs={3}>
-          <TextField
-            id="word-two"
-            label="Word 2"
-            variant="outlined"
-            fullWidth
-          />
-        </Grid>
-
-        <Grid item xs={3}>
-          <Button
-            variant="contained"
-            color="primary"
-            fullWidth
-            sx={{ height: "100%" }}
-            onClick={onPressButton}
-          >
-            Compare Embedding
-          </Button>
-        </Grid>
-      </Grid>
-      <Grid item textAlign={"center"}>
-        <h1>{message}</h1>
-      </Grid>
-    </>
+    <div>
+      <input
+        type="text"
+        value={wordOne}
+        onChange={(e) => setWordOne(e.target.value)}
+        placeholder="First Word"
+      />
+      <input
+        type="text"
+        value={wordTwo}
+        onChange={(e) => setWordTwo(e.target.value)}
+        placeholder="Second Word"
+      />
+      <button onClick={onPressButton}>Submit</button>
+      <p>{message}</p>
+    </div>
   );
-}
+};
 
 export default App;

prev.tsx

@@ -0,0 +1,74 @@
+import { Button, Grid, TextField } from "@mui/material";
+import { useState } from "react";
+import "./App.css";
+
+function App() {
+  const [message, setMessage] = useState("");
+  const [wordOne, setWordOne] = useState("");
+
+  const onChangeWordOne = (event) => {
+    const newWord = event.target.value;
+    console.log("Word One: ", newWord);
+    setWordOne(newWord);
+  };
+
+  const onPressButton = () => {
+    setMessage("Pau chupapijas");
+    // console.log("Word One: ", wordOne);
+    // const url = "http://127.0.0.1:8000/test";
+    const url = "https://abadesalex-emb-rep.hf.space/test";
+    const dataToSend = JSON.stringify({ message: wordOne });
+    fetch(url, {
+      method: "POST", // Specifying the method
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: dataToSend, // Data must be a stringified JSON
+    })
+      .then((response) => response.json())
+      .then((data) => setMessage(data.Hello))
+      .catch((error) => console.error("Error:", error));
+  };
+
+  return (
+    <>
+      <Grid container mt={2} mr={2} ml={2} textAlign={"center"} spacing={2}>
+        <Grid item xs={3}>
+          <TextField
+            id="word-one"
+            label="Word 1"
+            variant="outlined"
+            onChange={onChangeWordOne}
+            fullWidth
+          />
+        </Grid>
+
+        <Grid item xs={3}>
+          <TextField
+            id="word-two"
+            label="Word 2"
+            variant="outlined"
+            fullWidth
+          />
+        </Grid>
+
+        <Grid item xs={3}>
+          <Button
+            variant="contained"
+            color="primary"
+            fullWidth
+            sx={{ height: "100%" }}
+            onClick={onPressButton}
+          >
+            Compare Embedding
+          </Button>
+        </Grid>
+      </Grid>
+      <Grid item textAlign={"center"}>
+        <h1>{message}</h1>
+      </Grid>
+    </>
+  );
+}
+
+export default App;