La codifica è stata una sfida per le persone senza un background tecnico per molto tempo. Tuttavia, l'intelligenza artificiale generativa sta cambiando le cose. Con l'avvento degli strumenti GenAI, il divario tra il mondo della codifica e gli individui non tecnici si sta riducendo ogni giorno. Questi strumenti non solo danno agli utenti non tecnici l'opportunità di sperimentare la creazione di funzioni di codice di base, ma semplificano anche il processo di codifica per gli sviluppatori.
LlamaCoder di Together AI è uno di questi strumenti. Consente agli utenti di creare applicazioni impressionanti con pochi clic utilizzando semplici prompt. In questo articolo, mostrerò come utilizzare LlamaCoder per creare 5 semplici applicazioni.
Cominciamo!
Che cos'è LlamaCoder?
Together AI, il cloud leader per l'accelerazione dell'IA, consente agli sviluppatori e alle aziende di progettare, sviluppare e gestire senza problemi l'intero ciclo di vita dell'IA generativa utilizzando modelli open source come Llama. Per ispirare gli sviluppatori che lavorano con Llama, Together AI ha creato LlamaCoder, un'app Web open source che consente agli utenti di generare un'intera app da un prompt utilizzando Llama 3.1 405B.
In poco più di un mese dal suo rilascio, LlamaCoder è diventato un successo, guadagnando più di 2.000 stelle GitHub, con centinaia di sviluppatori che hanno clonato il repository. Sono già state generate oltre 200.000 app utilizzando LlamaCoder. Gli utenti stanno creando app di quiz, timer pomodoro, strumenti di budgeting e altro ancora, il tutto tramite semplici prompt, mostrando la potenza di Llama 3.1 405B.
Pila tecnologica
- Chiama 3.1 405B da Meta per l'LLM
- Insieme AI per inferenza LLM
- Pacco di sabbia per il codice sandbox
- Router dell'app Next.js con Tailwind
- Elicone per l'osservabilità
- Plausibile per l'analisi del sito web
Esempi di LlamaCoder
Llama 3.1 405B è stato il primo modello open source a eccellere in casi di utilizzo specifici di codifica, mostrando le sue capacità attraverso diverse applicazioni di successo. Together AI ha creato app di esempio utilizzando Llama 3.1, tra cui:
- Tutor di lama: Un'app progettata per facilitare l'apprendimento attraverso suggerimenti interattivi.
- Ricerca Turbo: Un motore di ricerca basato sull'intelligenza artificiale che migliora il recupero delle informazioni.
Questi esempi dimostrano come i modelli Llama abbiano ampliato i confini dei modelli di linguaggio di grandi dimensioni (LLM) open source. I modelli Llama rivaleggiano con le prestazioni dei migliori modelli closed source, integrando al contempo strumenti di sicurezza per garantire uno sviluppo responsabile.
Come utilizzare LlamaCoder?
- Visita il sito web: Vai al Applicazione LlamaCoder costruire.
- Descrivi la tua app: Inizia condividendo i dettagli di cosa dovrebbe fare la tua app e le funzionalità che desideri. Fornisci un semplice prompt che delinei la funzionalità che immagini.
- Scelta del Moder: LlamaCoder offre una gamma di modelli, tra cui i modelli Llama 3.1 45B e 70B. Tra questi, il modello 45B è consigliato per le sue prestazioni ottimali.
- Genera codice: L'intelligenza artificiale avanzata di LlamaCoder genererà automaticamente una base di codice React completa in base ai tuoi input, fornendoti una base funzionale su cui lavorare.
- Affinare e ripetere: Rivedi il codice generato e apporta le modifiche o i ritocchi necessari. Puoi perfezionare il codice per adattarlo esattamente alle tue esigenze.
- Costruire e distribuire: Una volta che sei soddisfatto del codice, crea e distribuisci la tua applicazione completamente funzionale, dando vita alla tua visione con il minimo sforzo.
Ora proviamo a usare LlamaCoder per creare 5 semplici app!
Tris
Richiesta: Crea un gioco del tris. Usa colori diversi per i giocatori o e x.
Codice generato
{
"dependencies": {
"react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^4.0.0",
"lucide-react": "latest", "recharts": "2.9.0", "react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog":
"^1.1.1", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar":
"^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-
collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-
dropdown-menu": "^2.1.1", "@radix-ui/react-hover-card": "^1.1.1", "@radix-
ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.1", "@radix-
ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-radio-group":
"^1.2.0", "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator":
"^1.1.0", "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-slot":
"^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs":
"^1.1.0", "@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-toggle":
"^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-
tooltip": "^1.1.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1",
"date-fns": "^3.6.0", "embla-carousel-react": "^8.1.8", "react-day-picker":
"^8.10.1", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1"
},
"devDependencies": {
"@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "typescript": "^4.0.0"
},
"main": "/index.tsx"
}
Anteprima dell'app
App pubblicata | Visualizza ed esegui il codice
Gioco del sudoku
Richiesta: Crea un'app di base per Sudoku in cui gli utenti possano riempire una griglia 9×9 con numeri da 1 a 9. L'app dovrebbe controllare se i numeri sono posizionati correttamente secondo le regole del Sudoku. Dovrebbe anche avere un pulsante di reset e un'opzione per ottenere un nuovo puzzle.
Codice generato
{
"dependencies": {
"react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^4.0.0",
"lucide-react": "latest", "recharts": "2.9.0", "react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "date-fns": "^3.6.0", "embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1", "tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7", "vaul": "^0.9.1"
},
"devDependencies": {
"@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "typescript": "^4.0.0"
},
"main": "/index.tsx"
}
Anteprima dell'app
App pubblicata | Visualizza ed esegui il codice
Gioco delle fiamme
Richiesta: Costruisci un gioco sulle fiamme con un pulsante per calcolare le fiamme.
Codice generato
{
"dependencies": {
"react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^4.0.0",
"lucide-react": "latest", "recharts": "2.9.0", "react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "date-fns": "^3.6.0", "embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1"
},
"devDependencies": {
"@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "typescript": "^4.0.0"
},
"main": "/index.tsx"
}
Anteprima dell'app
App pubblicata | Esegui e visualizza il codice
Quiz
Richiesta: Crea un quiz di 10 domande sulla catena alimentare.
Codice generato
{
"dependencies": {
"react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^4.0.0",
"lucide-react": "latest", "recharts": "2.9.0", "react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "date-fns": "^3.6.0", "embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1", "tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7", "vaul": "^0.9.1"
},
"devDependencies": {
"@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "typescript": "^4.0.0"
},
"main": "/index.tsx"
}
Anteprima dell'app
App pubblicata | Visualizza ed esegui il codice
Dragamine
Richiesta: Crea un gioco di dragamine.
Codice generato
{
"dependencies": {
"react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^4.0.0",
"lucide-react": "latest", "recharts": "2.9.0", "react-router-dom": "latest",
"@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1",
"@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "date-fns": "^3.6.0", "embla-carousel-react": "^8.1.8",
"react-day-picker": "^8.10.1", "tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7", "vaul": "^0.9.1"
},
"devDependencies": {
"@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "typescript": "^4.0.0"
},
"main": "/index.tsx"
}
Anteprima dell'app
App pubblicata | Visualizza ed esegui il codice
Come ospitare LlamaCoder in locale?
Se preferisci eseguire LlamaCoder localmente anziché utilizzare la versione ospitata, segui questi passaggi:
- Clona il repository LlamaCoder sul tuo computer.Apri la cartella clonata e crea un
.envfile. - Aggiungi la tua chiave API Together AI a
.envfile. Puoi creare il tuo account Qui. - Puoi ottenere questa chiave registrandoti sul sito web Together AI, che include 5 crediti gratuiti.
- Salva il
.envfile e tornare al terminale. - Correre
npm installper installare le dipendenze necessarie. - Avviare l'applicazione con
npm run dev.
Utilizzare il seguente codice per la chiamata API:
from together import Together
client = Together()
completion = client.chat.completions.create(
model="meta-llama/Meta-Llama-3.1-8B-Instruct-Turbo",
messages=({"role": "user", "content": "What are the top 3 things to do in New York?"}),
)Avviare l'applicazione con npm run dev.
Leggi anche: I 12 migliori generatori di codice AI che dovresti provare
Nota finale
LlamaCoder sta rivoluzionando il modo in cui sviluppatori e utenti non tecnici affrontano lo sviluppo di app. L'ascesa di strumenti di intelligenza artificiale open source come LlamaCoder consente un'innovazione più rapida, conferendo agli sviluppatori il pieno controllo sui propri dati e modelli, stimolando al contempo la creatività.
Che sia ospitato localmente o tramite la piattaforma Together AI, LlamaCoder fornisce un modo accessibile a chiunque di dare vita alle proprie idee di app. Questo strumento mostra come l'intelligenza artificiale generativa stia trasformando il futuro della codifica, consentendo agli utenti di passare dal concetto all'implementazione con facilità.
Pronti a vedere cosa può fare LlamaCoder? Provatelo e condividete il link della vostra app nei commenti qui sotto!
Per ulteriori contenuti informativi sull'intelligenza artificiale generativa, resta sintonizzato su Blog di analisi Vidhya!
Ciao, sono Nitika, una Content Creator e Marketer esperta di tecnologia. La creatività e l'apprendimento di cose nuove mi vengono naturali. Ho esperienza nella creazione di strategie di contenuto orientate ai risultati. Sono esperta in SEO Management, Keyword Operations, Web Content Writing, Communication, Content Strategy, Editing e Writing.
Fonte: www.analyticsvidhya.com
