# TensorFlow 1.x (Sessões explícitas)
import tensorflow as tf

x = tf.placeholder(tf.float32, shape=[None, 784])
y = tf.placeholder(tf.float32, shape=[None, 10])

# Construir modelo...

with tf.Session() as sess:
    sess.run(tf.global_variables_initializer())
    # Treinar modelo...

# TensorFlow 2.x (Eager execution)
import tensorflow as tf

modelo = tf.keras.Sequential([
    tf.keras.layers.Dense(128, activation='relu'),
    tf.keras.layers.Dense(10, activation='softmax')
])

modelo.compile(optimizer='adam',
              loss='sparse_categorical_crossentropy',
              metrics=['accuracy'])

modelo.fit(x_train, y_train, epochs=5)

import * as tf from '@tensorflow/tfjs';

// Criar um modelo sequencial
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Compilar o modelo com funções de perda e otimizador
model.compile({
  loss: 'meanSquaredError',
  optimizer: 'sgd'
});

// Dados de treino como tensores
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Treinar o modelo
async function treinarModelo() {
  await model.fit(xs, ys, {
    epochs: 500,
    callbacks: {
      onEpochEnd: (epoch, logs) => {
        console.log(`Epoch ${epoch}: loss = ${logs.loss}`);
      }
    }
  });

  // Fazer previsões
  const resultado = model.predict(tf.tensor2d([5], [1, 1]));
  resultado.print();
}

treinarModelo();

// Exemplo de uso do TensorFlow Lite com React Native
import * as tf from '@tensorflow/tfjs';
import { bundleResourceIO } from '@tensorflow/tfjs-react-native';

async function carregarModelo() {
  // Carregar modelo convertido para TFLite
  const modelJson = require('./assets/model/model.json');
  const modelWeights = require('./assets/model/group1-shard.bin');

  const model = await tf.loadLayersModel(
    bundleResourceIO(modelJson, modelWeights)
  );

  return model;
}

import React, { useEffect, useState, useRef } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
import './ImageClassifier.css';

function ClassificadorImagem() {
  const [modelo, setModelo] = useState(null);
  const [resultado, setResultado] = useState(null);
  const [carregando, setCarregando] = useState(true);
  const [imagem, setImagem] = useState(null);
  const [erro, setErro] = useState(null);
  const imgRef = useRef(null);

  // Carregar modelo pré-treinado ao montar o componente
  useEffect(() => {
    async function carregarModelo() {
      try {
        setCarregando(true);
        console.log('Carregando modelo MobileNet...');
        const modeloCarregado = await mobilenet.load();
        console.log('Modelo carregado com sucesso!');
        setModelo(modeloCarregado);
        setCarregando(false);
      } catch (err) {
        console.error('Erro ao carregar modelo:', err);
        setErro('Não foi possível carregar o modelo. Verifique sua conexão.');
        setCarregando(false);
      }
    }
    carregarModelo();
  }, []);

  async function classificarImagem() {
    if (!modelo || !imgRef.current) return;

    try {
      console.log('Classificando imagem...');
      const predicoes = await modelo.classify(imgRef.current);
      console.log('Predicoes:', predicoes);
      setResultado(predicoes);
    } catch (err) {
      console.error('Erro na classificação:', err);
      setErro('Erro ao processar a imagem.');
    }
  }

  function handleImagemUpload(e) {
    const file = e.target.files[0];
    if (!file) return;

    if (!file.type.match('image.*')) {
      setErro('Por favor, selecione uma imagem válida.');
      return;
    }

    setErro(null);
    const reader = new FileReader();
    reader.onload = (event) => {
      setImagem(event.target.result);
      setResultado(null); // Limpa resultados anteriores
    };
    reader.readAsDataURL(file);
  }

  return (
    <div className="classificador-container">
      <h2>Classificador de Imagens com TensorFlow.jsh2>

      {carregando ? (
        <div className="loading">
          <p>Carregando modelo de IA...p>
          <div className="spinner">div>
        div>
      ) : (
        <>
          <div className="upload-section">
            <label className="upload-btn">
              Selecionar Imagem
              <input 
                type="file" 
                accept="image/*" 
                onChange={handleImagemUpload} 
                hidden 
              />
            label>
          div>

          {erro && <div className="error-message">{erro}div>}

          {imagem && (
            <div className="image-preview">
              <img 
                ref={imgRef}
                src={imagem} 
                alt="Imagem para classificação" 
                onLoad={() => setResultado(null)}
              />
              <button 
                className="classify-btn" 
                onClick={classificarImagem}
                disabled={!modelo}
              >
                Classificar Imagem
              button>
            div>
          )}

          {resultado && (
            <div className="results">
              <h3>Resultados:h3>
              <ul>
                {resultado.map((item, index) => (
                  <li key={index}>
                    <span className="class-name">{item.className}span>
                    <div className="probability-bar">
                      <div 
                        className="probability-fill" 
                        style={{width: `${item.probability * 100}%`}}
                      >div>
                    div>
                    <span className="probability-value">
                      {(item.probability * 100).toFixed(2)}%
                    span>
                  li>
                ))}
              ul>
            div>
          )}
        >
      )}
    div>
  );
}

export default ClassificadorImagem;

.classificador-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  border-radius: 8px;
  background: #fff;
}

.upload-section {
  margin: 1.5rem 0;
  text-align: center;
}

.upload-btn {
  background-color: #2196f3;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s;
}

.upload-btn:hover {
  background-color: #0d8aee;
}

.image-preview {
  margin: 2rem 0;
  text-align: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.classify-btn {
  margin-top: 1rem;
  padding: 10px 25px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.classify-btn:hover {
  background-color: #43a047;
}

.classify-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.results {
  margin-top: 2rem;
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
}

.results ul {
  list-style: none;
  padding: 0;
}

.results li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.class-name {
  flex: 0 0 40%;
  font-weight: bold;
}

.probability-bar {
  flex: 1;
  height: 15px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 15px;
}

.probability-fill {
  height: 100%;
  background-color: #2196f3;
  border-radius: 10px;
}

.probability-value {
  flex: 0 0 10%;
  text-align: right;
  font-weight: bold;
}

.loading {
  text-align: center;
  padding: 2rem;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #2196f3;
  animation: spin 1s ease infinite;
  margin: 1rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #d32f2f;
  background-color: #ffebee;
  padding: 10px;
  border-radius: 4px;
  margin: 1rem 0;
  text-align: center;
}

// Definindo tipos para parâmetros do modelo
interface ModelParams {
  learningRate: number;
  batchSize: number;
  epochs: number;
  hiddenLayers: number[];
}

// Classe para gerenciar o modelo com tipagem
class MLModel {
  private model: tf.LayersModel;
  private params: ModelParams;

  constructor(params: ModelParams) {
    this.params = params;
    this.buildModel();
  }

  private buildModel(): void {
    this.model = tf.sequential();

    // Adicionar camada de entrada
    this.model.add(tf.layers.dense({
      units: this.params.hiddenLayers[0],
      inputShape: [10],
      activation: 'relu'
    }));

    // Adicionar camadas ocultas
    for (let i = 1; i < this.params.hiddenLayers.length; i++) {
      this.model.add(tf.layers.dense({
        units: this.params.hiddenLayers[i],
        activation: 'relu'
      }));
    }

    // Camada de saída
    this.model.add(tf.layers.dense({
      units: 1,
      activation: 'sigmoid'
    }));

    this.model.compile({
      optimizer: tf.train.adam(this.params.learningRate),
      loss: 'binaryCrossentropy',
      metrics: ['accuracy']
    });
  }

  async train(x: tf.Tensor, y: tf.Tensor): Promise<tf.History> {
    return await this.model.fit(x, y, {
      batchSize: this.params.batchSize,
      epochs: this.params.epochs,
      validationSplit: 0.2,
      callbacks: tf.callbacks.earlyStopping({
        monitor: 'val_loss',
        patience: 5
      })
    });
  }

  predict(input: tf.Tensor): tf.Tensor {
    return this.model.predict(input) as tf.Tensor;
  }

  async save(path: string): Promise<void> {
    await this.model.save(`localstorage://${path}`);
  }

  static async load(path: string): Promise<MLModel> {
    const model = await tf.loadLayersModel(`localstorage://${path}`);
    // Criar instância com parâmetros padrão
    const instance = new MLModel({
      learningRate: 0.001,
      batchSize: 32,
      epochs: 50,
      hiddenLayers: [64, 32]
    });
    instance.model = model;
    return instance;
  }
}

// Uso
const modelParams: ModelParams = {
  learningRate: 0.001,
  batchSize: 32,
  epochs: 50,
  hiddenLayers: [64, 32, 16]
};

async function executarModelo() {
  const model = new MLModel(modelParams);

  // Carregar e pre-processar dados
  const data = await loadData();
  const { xTrain, yTrain, xTest, yTest } = preprocessData(data);

  // Treinar modelo
  const history = await model.train(xTrain, yTrain);

  // Avaliar
  const evalResult = model.model.evaluate(xTest, yTest);

  // Salvar
  await model.save('meu-modelo-v1');
}

import * as tf from '@tensorflow/tfjs';
import * as tfhub from '@tensorflow-models/universal-sentence-encoder';

async function processarTexto() {
  // Carregar modelo de embeddings de sentenças
  const modelo = await tfhub.load();

  const frases = [
    'Como está o tempo hoje?',
    'Qual a previsão para amanhã?',
    'O TensorFlow é uma biblioteca excelente.'
  ];

  // Criar embeddings
  const embeddings = await modelo.embed(frases);

  // Calcular similaridade entre frases
  const frase1 = embeddings.slice([0, 0], [1, embeddings.shape[1]]);
  const frase2 = embeddings.slice([1, 0], [1, embeddings.shape[1]]);
  const frase3 = embeddings.slice([2, 0], [1, embeddings.shape[1]]);

  // Similaridade de cosseno
  const similaridade12 = calcularSimilaridade(frase1, frase2);
  const similaridade13 = calcularSimilaridade(frase1, frase3);

  console.log(`Similaridade entre frases 1 e 2: ${similaridade12}`);
  console.log(`Similaridade entre frases 1 e 3: ${similaridade13}`);
}

function calcularSimilaridade(a, b) {
  return tf.tidy(() => {
    const normA = a.div(tf.norm(a));
    const normB = b.div(tf.norm(b));
    return normA.dot(normB.transpose()).dataSync()[0];
  });
}

// pages/image-classifier.tsx
import { useEffect, useState, useRef } from 'react';
import Head from 'next/head';
import styles from '../styles/ImageClassifier.module.css';

export default function ImageClassifier() {
  const [modeloCarregado, setModeloCarregado] = useState(false);
  const [predicoes, setPredicoes] = useState(null);
  const [imagem, setImagem] = useState(null);
  const canvasRef = useRef(null);
  const imgRef = useRef(null);

  // Carregar TensorFlow.js dinamicamente apenas no cliente
  useEffect(() => {
    async function carregarDependencias() {
      // Importar dinamicamente
      const tf = (await import('@tensorflow/tfjs')).default;
      const cocoSsd = (await import('@tensorflow-models/coco-ssd')).default;

      // Carregar modelo
      const modelo = await cocoSsd.load();
      window.detectarObjetos = async (img) => {
        const resultados = await modelo.detect(img);
        return resultados;
      };

      setModeloCarregado(true);
    }

    carregarDependencias();
  }, []);

  async function handleImagemUpload(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        setImagem(img);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }

  async function detectarObjetos() {
    if (!imagem || !window.detectarObjetos) return;

    const resultados = await window.detectarObjetos(imgRef.current);
    setPredicoes(resultados);

    // Desenhar caixas delimitadoras
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    canvas.width = imgRef.current.width;
    canvas.height = imgRef.current.height;

    ctx.drawImage(imgRef.current, 0, 0);
    ctx.font = '16px Arial';

    resultados.forEach(resultado => {
      const [x, y, width, height] = resultado.bbox;
      ctx.strokeStyle = '#00FFFF';
      ctx.lineWidth = 2;
      ctx.strokeRect(x, y, width, height);

      ctx.fillStyle = '#00FFFF';
      ctx.fillText(
        `${resultado.class} ${Math.round(resultado.score * 100)}%`,
        x, y > 10 ? y - 5 : 10
      );
    });
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Detector de Objetos com TensorFlow.jstitle>
      Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Detector de Objetos com TensorFlow.js e Next.js
        h1>

        <div className={styles.card}>
          <input
            type="file"
            accept="image/*"
            onChange={handleImagemUpload}
            className={styles.fileInput}
          />

          {imagem && (
            <div className={styles.imageContainer}>
              <img
                ref={imgRef}
                src={imagem.src}
                className={styles.hiddenImage}
                alt="Imagem para detecção"
              />
              <canvas ref={canvasRef} className={styles.canvas} />

              <button
                onClick={detectarObjetos}
                disabled={!modeloCarregado}
                className={styles.button}
              >
                {modeloCarregado ? 'Detectar Objetos' : 'Carregando modelo...'}
              button>
            div>
          )}

          {predicoes && (
            <div className={styles.results}>
              <h3>Objetos Detectados:h3>
              <ul>
                {predicoes.map((pred, i) => (
                  <li key={i}>
                    {pred.class} - {(pred.score * 100).toFixed(2)}%
                  li>
                ))}
              ul>
            div>
          )}
        div>
      main>
    div>
  );
}