He probado la App de Meta que crea aplicaciones enteras a partir de un prompt

🦙 Llama Coder crea aplicaciones enteras a partir de un solo prompt (o eso dicen)

Junto con Meta, Together AI lanza LlamaCoder, una plataforma que permite crear aplicaciones completas desde un solo prompt.

La promesa es que a partir de tan solo una frase como “crea una aplicación de una calculadora” te cree la aplicación al completo.

Yo la he probado y el resultado aun esta muy lejos de ser considerado una aplicación completa.

He probado a introducir el prompt “crea una aplicacion para gestionar mis finanzas personales“.

Y esto es lo que ha creado:

Que no deja de ser un solo componente en React.

Aquí el código para los más curiosos:

import { useState } from 'react';

interface Transaction {
  id: number;
  date: string;
  description: string;
  amount: number;
  type: 'income' | 'expense';
}

const App = () => {
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');
  const [type, setType] = useState<'income' | 'expense'>('income');

  const handleAddTransaction = () => {
    if (description && amount) {
      const newTransaction: Transaction = {
        id: transactions.length + 1,
        date: new Date().toISOString(),
        description,
        amount: parseFloat(amount),
        type,
      };
      setTransactions([...transactions, newTransaction]);
      setDescription('');
      setAmount('');
    }
  };

  const handleDeleteTransaction = (id: number) => {
    setTransactions(transactions.filter((transaction) => transaction.id !== id));
  };

  const totalIncome = transactions.reduce((acc, transaction) => {
    if (transaction.type === 'income') {
      return acc + transaction.amount;
    }
    return acc;
  }, 0);

  const totalExpense = transactions.reduce((acc, transaction) => {
    if (transaction.type === 'expense') {
      return acc + transaction.amount;
    }
    return acc;
  }, 0);

  const balance = totalIncome - totalExpense;

  return (
    <div className="max-w-md mx-auto p-4 mt-12 bg-white rounded shadow-md">
      <h1 className="text-2xl font-bold mb-4">Finanzas Personales</h1>
      <form className="mb-4">
        <input
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          placeholder="Descripción"
          className="w-full p-2 mb-2 border border-gray-400 rounded"
        />
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="Monto"
          className="w-full p-2 mb-2 border border-gray-400 rounded"
        />
        <select
          value={type}
          onChange={(e) => setType(e.target.value as 'income' | 'expense')}
          className="w-full p-2 mb-2 border border-gray-400 rounded"
        >
          <option value="income">Ingreso</option>
          <option value="expense">Gasto</option>
        </select>
        <button
          type="button"
          onClick={handleAddTransaction}
          className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
        >
          Agregar transacción
        </button>
      </form>
      <h2 className="text-xl font-bold mb-2">Transacciones</h2>
      <ul>
        {transactions.map((transaction) => (
          <li key={transaction.id} className="mb-2">
            <div className="flex justify-between">
              <span>
                {transaction.description} ({transaction.type})
              </span>
              <span>
                {transaction.amount}€
              </span>
              <button
                type="button"
                onClick={() => handleDeleteTransaction(transaction.id)}
                className="text-red-500 hover:text-red-700"
              >
                Eliminar
              </button>
            </div>
          </li>
        ))}
      </ul>
      <h2 className="text-xl font-bold mb-2">Resumen</h2>
      <ul>
        <li>
          <span>Ingresos: {totalIncome}€</span>
        </li>
        <li>
          <span>Gastos: {totalExpense}€</span>
        </li>
        <li>
          <span>Balance: {balance}€</span>
        </li>
      </ul>
    </div>
  );
};

export default App;