7 Lezioni apprese sulla creazione di un prodotto completo utilizzando ChatGPT

7 Lezioni su creazione prodotto con ChatGPT

Le abilità di codifica di ChatGPT rendono molto facile codificare interi prodotti in poco tempo – se si sa come usarlo nel modo giusto

Non molto tempo fa ho condiviso con voi come ho creato il mio tutor di francese utilizzando ChatGPT (per inciso, è open-source). Ho descritto come ho progettato l’applicazione (e in particolare il suo backend) e come ho collegato e configurato i diversi servizi basati sull’intelligenza artificiale. Ma c’era una cosa che ho praticamente saltato, ovvero come ho creato il frontend dell’applicazione. Vedete, non sono un programmatore frontend e la mia conoscenza di JavaScript si riassume al fatto che so di doverlo inserire tra i tag <script></script>.

Ma l’applicazione che avevo in mente richiedeva un’interfaccia utente (UI), e una piuttosto dinamica. Ciò significa HTML, JavaScript e CSS, ma non avevo idea di come iniziare a scrivere il codice per questi elementi.

Quello che sapevo era come volevo che apparisse. Avevo il design nella mia mente, e sapevo come avrei fatto se avessi saputo come programmare tutto questo. E così ho deciso di adottare un approccio nuovo e piuttosto radicale: chiederò a ChatGPT di scrivere il codice per me. A quel punto avevo già esperienza nel chiedere a ChatGPT richieste relative al codice, ma non avevo mai provato qualcosa di così complesso.

Bene, mentre leggete queste righe, sapete che ha funzionato: ho creato un’intera applicazione semplicemente istruendo un LLM (Large Language Model) su ciò che volevo vedere. Voglio proprio riscrivere questa frase ancora una volta, solo per essere sicuro che tutti capiamo cosa è appena successo: un algoritmo ha codificato un’intera applicazione semplicemente spiegandomi in inglese semplice cosa volevo. 😲

• Valutazione dinamica del progetto di intelligenza artificiale
• Proteggi la tua app LLM. Un must da leggere!
• Utilizza l’integrazione tra Amazon SageMaker e Salesforce Data Cloud per potenziare le tue app Salesforce con intelligenza artificiale/apprendimento automatico

Tuttavia, per quanto sorprendente possa sembrare, questo processo non è stato così banale come potrebbe sembrare, e quindi vorrei cogliere l’occasione per condividere alcuni consigli che ho imparato su come generare codice complesso utilizzando ChatGPT.

1. Progettarlo da soli

LLM sono potenti strumenti per creare codice e contenuti, ma non pensano: possono solo soddisfare richieste (o almeno ci provano). Ciò significa che spetta a voi fare il pensiero e, in particolare, il design. Assicuratevi di sapere come dovrebbe apparire il prodotto finale prima di iniziare a inviare richieste al modello generativo.

Ulteriori dettagli: spetta a voi fare le ricerche su quale sia la migliore tecnologia per voi. Poiché dovrete suddividere la vostra applicazione complessa in passaggi (vedi punto 2 di seguito), il LLM non può prevedere come apparirà il prodotto finale e potrebbe utilizzare librerie o servizi non ottimali.

Ad esempio, la prima UI generata da ChatGPT per me era basata su tkinter, che crea un’applicazione desktop e non un’interfaccia web. Ciò rende molto più complicato creare una UI dinamica (e meno standard al giorno d’oggi). Un altro tentativo era basato su steamlit, che rende molto facile creare UI non complesse, ma ancora una volta non era progettato per richieste complesse (ad esempio: “aggiungi un pulsante di registrazione solo accanto ai messaggi dell’utente, ma solo se l’utente ha registrato un audio”). Nel mio caso, spettava a me capire che utilizzare Flask sarebbe stato il modo ottimale da seguire.

2. Suddividerlo in compiti e iniziare con semplicità

Se chiedete a ChatGPT di codificare l’intero prodotto in una volta sola, c’è una buona possibilità che otterrete un codice non funzionante. Per quanto “intelligente” possa essere, non aspettatevi che possa prestare attenzione a tutti i dettagli forniti contemporaneamente. Suddividete il vostro design in compiti e fasi, iniziando con qualcosa di piuttosto semplice e aggiungendo altro sopra.

Ad esempio, ecco la mia UI finale per la chat, quella che avevo inizialmente progettato e pianificato:

Potete vedere che ci sono tutti i tipi di pulsanti e funzionalità nell’interfaccia utente, eppure, la mia prima richiesta a ChatGPT è stata semplicemente:

Scrivi un'interfaccia utente web Python per un'applicazione di chatbot. La casella di testo in cui l'utente inserisce il suo messaggio è posizionata in fondo allo schermo e tutti i messaggi precedenti vengono mantenuti sullo schermo.

Nessun pulsante speciale, nessuna immagine del profilo accanto ai messaggi, niente di speciale. Solo un’interfaccia di chat semplice, che sarà il nucleo su cui costruirò. Questo prompt ha generato 4 file:

• Un file Python che funge da backend (utilizzando Flask)
• Un file HTML
• Un file JavaScript (utilizzando jQuery)
• Un file CSS

Una volta che ho avuto questo, ho potuto iniziare a rendere il prodotto più complesso.

Potresti pensare di aver contraddetto me stesso – dirti di suddividere l’app in piccoli passaggi, eppure confessare che il mio primo prompt ha generato quattro file. Per ogni richiesta da ChatGPT, c’è un compromesso tra la quantità di codice richiesta per completare il compito e quanto sia non standard e specifico. Chiedere un’intera interfaccia di chat genererà qualcosa di piuttosto generale, ma richiederà molto codice. Chiedere di “aggiungere un pulsante di traduzione accanto ai messaggi del tutor” e assicurarsi che sia posizionato sul lato destro della bolla del messaggio, sempre al centro verticale e sopra il pulsante di riproduzione audio è qualcosa di molto specifico e quindi sarà una richiesta a sé stante.

3. Spiega attentamente cosa desideri davvero

Ogni richiesta e aggiunta che farai al tuo prodotto potrebbe comportare modifiche a più di un file (e più di una singola modifica per ciascun file). Ciò significa che nuove variabili, funzioni e endpoint verranno creati ad ogni richiesta del genere e saranno referenziati da posizioni diverse. I nomi forniti a quelli saranno dati da ChatGPT e farà del suo meglio per fornire loro nomi significativi, ma può farlo solo se spiegherai bene il contesto.

Ad esempio, se desideri aggiungere un pulsante “Salva” al tuo prodotto, preferisci chiederlo in questo modo:

Aggiungi un pulsante "Salva sessione" alla sinistra della casella di testo. Dovrebbe avere un'icona di un floppy disk. Una volta cliccato, tutti i messaggi dell'interfaccia utente verranno salvati in un file JSON chiamato "saved_session.json"

anziché una richiesta priva di contesto come questa:

Aggiungi un pulsante alla sinistra della casella di testo con un'icona di un floppy disk. Una volta cliccato, tutti i messaggi dell'interfaccia utente verranno salvati in un file JSON.

Preferire prompt ricchi di contesto produrrà migliori convenzioni di denominazione.

4. Sii molto consapevole di cosa chiedi esattamente

Ecco un vero problema che ho dovuto risolvere e che non avevo previsto: volevo che l’interfaccia utente mostrasse il testo generato dal mio tutor di francese mentre veniva trasmesso, in modo simile all’effetto in ChatGPT. L’API Python che stavo usando per creare la risposta del tutor (OpenAI ChatCompletion API) restituisce un generatore Python, che doveva quindi essere consumato e stampato a schermo. E così ho chiesto a ChatGPT:

Scrivi una funzione JavaScript che consuma il generatore e aggiorna il testo del messaggio un elemento alla volta

Cosa che non sapevo – essendo che non ho mai scritto seriamente JavaScript nella mia vita – era che avevo chiesto qualcosa di impossibile; JavaScript non ha modo di gestire un generatore Python. Quello che è successo è che ChatGPT mi ha dato tutte le soluzioni strane e completamente inutili, cercando di fare esattamente ciò che ho chiesto – modificare il codice JavaScript.

Devi ricordare che ChatGPT cerca di soddisfare le tue richieste esattamente come le hai chieste, fintanto che non violino le sue linee guida. Quello che realmente mi serviva in quel momento era che mi dicesse che sto chiedendo qualcosa di stupido, ma non funziona così.

Questo problema è stato risolto solo quando ho capito che stavo chiedendo l’impossibile (il vecchio modo – Google e StackOverflow) e ho modificato il mio prompt in qualcosa del genere:

Dato il generatore di risposta, aggiungi la funzionalità per consumare il generatore e aggiornare il testo del messaggio un elemento alla volta

che ha comportato modifiche sia al file JavaScript che al file Python, consentendo il risultato desiderato.

5. LLMs non possono annullare il loro codice (e come annullarlo)

Anche se ChatGPT è eccezionale nel scrivere codice, è comunque solo un modello di linguaggio e non è bravo nel ripristinare le proprie modifiche, specialmente se gli viene chiesto di tornare indietro di due o tre passaggi. Quando si lavora con LLM per generare codice in fasi, consiglio vivamente di tenere sempre una copia dell’ultima versione funzionante del codice con cui si è soddisfatti; in questo modo, se il nuovo codice aggiunto da ChatGPT è rotto e non può essere riparato, è possibile annullare facilmente il proprio codice all’ultima versione funzionante.

Ma c’è un’eccezione: se si annulla il codice, è necessario annullare anche ChatGPT, per assicurarsi che sappia esattamente come appare il codice ora. Il modo migliore per farlo è avviare una nuova sessione e iniziare con una richiesta del genere:

Sto sviluppando un'applicazione chatbot. Ecco il mio codice finora: HTML:```il tuo codice HTML```JavaScript:```il tuo codice JavaScript```CSS:```il tuo codice CSS```Python:```il tuo codice Python```Aggiungi un pulsante "Salva sessione" alla sinistra della casella di testo. Dovrebbe avere un'icona di un floppy disk. Una volta cliccato, tutti i messaggi dell'interfaccia utente verranno salvati in un file JSON chiamato "saved_session.json"

(È anche possibile caricare i file nell’interprete di codice di ChatGPT, che non era disponibile all’epoca). Se la richiesta è troppo lunga per essere inviata come un singolo messaggio, suddividerla in due. Fare clic su “Stop Generazione” tra questi messaggi per evitare che il bot inserisca testo inutile tra di essi.

6. Non lottare troppo a lungo

Una delle cose interessanti di codificare con ChatGPT è che se scrive codice errato o il codice non funziona come previsto, è possibile inviargli il messaggio di errore e correggerà il codice di conseguenza.

Ma ciò non accade sempre. A volte ChatGPT non riesce a correggere il bug o crea invece un altro bug. In tal caso, inviamo il nuovo errore e chiediamo di nuovo di correggerlo. Se ciò accade più di due o tre volte, c’è una buona probabilità che il codice sia così rotto o eccessivamente modificato da non funzionare semplicemente. Se si raggiunge quel punto, fermarsi, annullare (vedi sopra) e riformulare la richiesta.

7. Impara come fare le richieste

Sebbene il punto principale di ChatGPT sia il fatto che è possibile interagire con esso utilizzando un linguaggio di tutti i giorni, sapere come scrivere correttamente le richieste può avere un effetto immenso sul risultato. Consiglio vivamente di dedicare del tempo per imparare come fare. Ad esempio, questo corso gratuito di OpenAI e DeepLearning.AI sull’ingegneria delle richieste è un must, in particolare la lezione su come combinare istruzioni, codice ed esempi in una singola richiesta.

Una delle cose più importanti da imparare riguardo alle richieste è assicurarsi che ci sia una differenza distinguibile tra il testo libero e il codice nella richiesta. Quindi, anziché scrivere così:

Ecco una funzione Python: def func(x):   return x*2Cambia il codice in modo che restituisca la radice del valore assoluto dell'input se è negativo.

scrivilo così:

Ecco una funzione Python: ```def func(x):   return x*2```Cambia il codice in modo che restituisca la radice del valore assoluto dell'input se è negativo.

Inoltre, se possibile, fornisci esempi di input-output. Questo è il miglior metodo per spiegare a un LLM cosa dovrebbe fare, in quanto rimuove qualsiasi ambiguità nella richiesta (cosa dovrebbe restituire il modello se l’input è positivo? mantenerlo come x*2 o forse niente?):

Ecco una funzione Python: ```def func(x):   return x*2```Cambia il codice in modo che restituisca la radice del valore assoluto dell'input se è negativo.Esempi:Input: 2, Output: 4Input: -9, Output: 3

Bonus: Scegli il giusto LLM

Ricorda che “ChatGPT” è il nome del prodotto web, non del modello stesso. La versione gratuita ti dà accesso a GPT-3.5, mentre la versione a pagamento include GPT-4, che si comporta molto meglio nei compiti di codifica. Il nuovo interprete di codice ne migliora anche le prestazioni, in quanto può effettivamente eseguire e testare il codice.

Anche se decidi di scegliere un altro LLM con cui lavorare, assicurati che quello che scegli si comporti bene nei compiti di codifica. Altrimenti, nessuno di questi suggerimenti sarà di aiuto.

Mentre sto concludendo tutto questo, suppongo che la cosa più importante da capire quando si comunica con gli LLM è che ogni parola conta. Gli LLM non pensano e non possono veramente capire cosa vogliamo senza spiegarlo loro esplicitamente nel modo in cui ne hanno bisogno, perché — grazie a Dio — non sono umani (ancora?), sono solo uno strumento. E proprio come ogni strumento — se non sai come lavorare con esso, non riuscirai a fare nulla. Spero che troverai utili questi suggerimenti per il tuo prossimo progetto!