Projeto liliti stk 3.6.9 inteligência artificial fase 3 navegador i. A

[felipeliliti]

Estrutura do Projeto

google-web/
├── backend/
│   ├── index.js
│   ├── package.json
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── App.js
│   │   ├── App.css
│   │   ├── index.js
│   ├── package.json
├── README.md

Frontend (React)

1. Criar o Projeto React

npx create-react-app frontend
cd frontend
npm install axios

2. Editar o src/App.js

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [image, setImage] = useState(null);

  const handleSearch = async () => {
    const response = await axios.post('http://localhost:5000/search', { query });
    setResults(response.data.results);
  };

  const handleImageCreation = async () => {
    const response = await axios.post('http://localhost:5000/create-image', { query });
    setImage(response.data.image);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Google Web</h1>
        <input 
          type="text" 
          value={query} 
          onChange={(e) => setQuery(e.target.value)} 
          placeholder="Digite sua busca..."
        />
        <button onClick={handleSearch}>Buscar</button>
        <button onClick={handleImageCreation}>Criar Imagem</button>
        <div className="results">
          {results.map((result, index) => (
            <div key={index} className="result">
              {result}
            </div>
          ))}
        </div>
        {image && (
          <div className="image-result">
            <img src={image} alt="Generated" />
          </div>
        )}
      </header>
    </div>
  );
}

export default App;

3. Criar src/App.css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

input {
  padding: 10px;
  margin: 10px;
  width: 300px;
}

button {
  padding: 10px 20px;
  margin: 10px;
}

.results, .image-result {
  margin-top: 20px;
}

.result {
  background: #444;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

4. Criar src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Backend (Node.js e Express)

1. Criar a Estrutura do Backend

mkdir backend
cd backend
npm init -y
npm install express axios cors

2. Criar backend/index.js

const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

app.post('/search', async (req, res) => {
  const { query } = req.body;
  // Simulação de busca (substitua com lógica real)
  const results = [`Resultado para "${query}"`];
  res.json({ results });
});

app.post('/create-image', async (req, res) => {
  const { query } = req.body;
  // Simulação de criação de imagem (substitua com lógica real)
  const image = 'data:image/png;base64,...'; // Aqui você pode integrar com uma API de IA para gerar a imagem
  res.json({ image });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Executar o Projeto

1. Iniciar o Backend

cd backend
node index.js

2. Iniciar o Frontend

cd ../frontend
npm start

Publicar no GitHub

1. Inicializar o Repositório Git na Raiz do Projeto

git init
git add .
git commit -m "Initial commit"

2. Criar o Repositório no GitHub e Conectar

git remote add origin https://github.com/seu-usuario/google-web.git
git branch -M main
git push -u origin main

[staleycyn]

Please do not post to this repository unless it relates to the teaching content.