Fucion input api

README.md

@@ -2,6 +2,8 @@
 
 ## Introducción:
 
+
+
 El desafío de tu equipo es crear un chat bot integrado a un mapa que permita a los usuarios
 buscar y visualizar lugares turísticos o de interés, los cuales se deberán visualizar en un mapa.
 Utilizarás la API de OpenAI para obtener información sobre estos lugares y se te proporcionará código

package.json

@@ -19,6 +19,7 @@
     "openai": "^4.52.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {

src/App.css

@@ -4,7 +4,7 @@
 
 
 .map {
-    height: 60vh;
+    height: 100vh;
 }
 
 .loader-dots div {
@@ -49,4 +49,4 @@
     100% {
         transform: translate(24px, 0);
     }
-}
+}

src/App.jsx

@@ -1,16 +1,59 @@
-import { useState } from 'react'
-import MapComponent from './components/Map.jsx'
+import { useEffect, useState } from 'react';
+import MapComponent from './components/Map.jsx';
+import InputComponent from './components/Input.jsx';
+import OpenAI from 'openai';
 
 const App = () => {
   let [places, setPlaces] = useState([]);
+  let [searchQuery, setSearchQuery] = useState('');
+
+  console.log(import.meta.env.VITE_OPENAI_API_KEY);
+  const openai = new OpenAI({
+    apiKey: import.meta.env.VITE_OPENAI_API_KEY,
+    dangerouslyAllowBrowser: true,
+  });
+
+  const context = `Eres un asistente de turismo que se encarga de encontrar lugares turísticos
+  o de interés unicamente de la ciudad de Encarnación, Paraguay.
+  Cada lugar debe ser devuelto en una lista de objetos JSON con las siguientes propiedades: [
+    {
+        "key: "Nombre del lugar",
+        "type": "Comida",
+        "description": "Una breve descripción del lugar y por qué fue incluido en la lista.",
+        "address": "Dirección del lugar",
+        "location": { "lat": valor_numérico, "lng": valor_numérico }
+    }
+], necesito que la respuesta sea unicamente el JSON sin texto inicial ni al final`;
+
+  async function callOpenAI(query) {
+    console.log("Llamando a OpenAI con la consulta:", query);
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o-mini",
+      messages: [{ role: "user", content: context + ` "${query}"` }],
+    });
+
+    console.log(`Respuesta desde GPT: ${response.choices[0]}`);
+    const placesJSON = response.choices[0].message.content;
+
+    setPlaces(JSON.parse(placesJSON));
+  }
+
+  useEffect(() => {
+    if (searchQuery) {
+      callOpenAI(searchQuery);
+    }
+  }, [searchQuery]);
+
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+  };
 
   return (
-    <>
-      <div className="w-screen h-screen m-0 p-3 bg-slate-500">
-        <MapComponent locations={places}/>
-      </div>
-    </>
+    <div className="w-screen h-screen relative m-0 p-0 bg-slate-500">
+      <InputComponent onSearch={handleSearch} />
+      <MapComponent locations={places} />
+    </div>
   );
 };
 
-export default App;
+export default App;