- Cuarzo.dev
- Posts
- He probado la App de Meta que crea aplicaciones enteras a partir de un prompt
He probado la App de Meta que crea aplicaciones enteras a partir de un prompt
O al menos, eso es lo que 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.
¿Qué te parece? |
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;
Reply