Vous avez probablement vu le battage médiatique avec ChatGPT d’OpenAI ces jours-ci.

Mais ce n’est pas le seul nouveau produit de la société AI.

La nouvelle vague de modèles GPT « 3.5 » comprend également un modèle davinci plus puissant , maintenant la version 003, et un nouveau modèle spécialisé pour l’écriture de code, appelé code-davinci-002. Pour le moment, ce modèle est gratuit, ce qui signifie qu’il ne consommera pas vos jetons.

J’ai essayé code-davinci-002 pour tester l’utilité d’écrire du code, en particulier du code JavaScript que j’utilise beaucoup pour mon travail et mes loisirs. Et je suis étonné des résultats.

Comme je le montre ici dans les exemples, code-davinci-002 peut non seulement écrire du code à partir d’invites, mais aussi corriger des erreurs et suggérer des alternatives, convertir du code d’autres langages en JavaScript, et même rédiger des applications Web assez complètes traitant de choses complexes telles que en tant qu’appareils multimédias.

Lisez la suite pour constater la puissance de cet outil, en suivant les liens pour voir ces programmes en cours d’exécution dans votre navigateur Web.

Une fonction JavaScript pour calculer des statistiques de base sur les nombres d’un tableau d’entrée

Simplement ça, comme premier exemple pour s’échauffer.

Où ai-je exécuté cela (et toutes les autres générations de code) ? Dans le terrain de jeu officiel OpenAI pour les modèles GPT :

https://beta.openai.com/playground?model=code-davinci-002

Notez que le lien appelle déjà automatiquement code-davinci-002 , qui est le modèle spécialisé pour le code.

/* Écrire une fonction JavaScript qui renvoie toutes les statistiques de base pour un tableau de nombres. L'entrée est un tableau avec des nombres, la sortie est un autre tableau avec médiane, moyenne, écart type, etc.*/ 
function  statistics ( arr ) { 
 var sum = 0 ; 
 var min = arr[ 0 ]; 
 var max = arr[ 0 ] ; 
 var moy = 0 ; 
 var médiane = 0 ; 
 var stdDev = 0 ; 
 var résultat = [] ; 
 pour ( var i = 0 ; i < arr. longueur; i++) { 
  somme += arr[i] ; 
  si (arr[i] < min) { 
   min = arr[i] ; 
  } 
  si (arr[i] > max) { 
   max = arr[i] ; 
  } 
} 
moy = somme / arr. longueur ; 
arr. trier ( fonction ( a, b ) { 
 retourner a - b; 
}); 
 si (arr. longueur % 2 === 0 ) { 
  médiane = (arr[arr. longueur / 2 – 1 ] + arr[arr. longueur / 2 ]) / 2 ; 
}sinon { 
  médiane = arr[(arr. longueur - 1 ) / 2 ] ; 
} 
 for ( var j = 0 ; j < arr. length ; j++) { 
  stdDev += Math . pow ((arr[j] — moy), 2 ); 
} 
stdDev = Math . sqrt (stdDev / arr. longueur ); 
résultat. pousser (min, max, moy, médiane, stdDev) ; 
 retourner le résultat ; 
} 
console . journal ( statistiques ([ 1, 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ])); 
consoler . log ( statistiques ([ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 ]));

Vous pouvez essayer ce code dans cette page (j’ai modifié les dernières lignes pour afficher la sortie directement dans la page Web plutôt que dans le journal de la console, mais le reste du code est intact !)

http://lucianoabriata.altervista.org/tests/gpt3.5-code-davinci002/statistics.html

Fonction JavaScript pour convertir des séquences d’ADN en séquences de protéines en utilisant le code génétique

Voyons comment il gère les chaînes, et en même temps s’il peut appliquer les connaissances générales de GPT3.5, par exemple sur le code génétique et le fonctionnement de la biologie.

/* Écrire une fonction JavaScript qui traduit une séquence d'ADN en une séquence de protéines*/ 
function  translate ( sequence ) { 
 var codons = { 
' ATA ':'I', ' ATC ':'I', ' ATT ':'I' , ' ATG ':'M', 
' ACA ':'T', ' ACC ':'T', ' ACG ':'T', ' ACT ':'T', 
' AAC ':'N', ' AAT ':'N', ' AAA ':'K', ' AAG ':'K', 
' AGC ':'S', ' AGT ':'S', ' AGA ':'R', ' AGG':'R', 
' CTA ':'L', ' CTC ':'L', ' CTG ':'L', ' CTT ':'L', 
' CCA ':'P', ' CCC ' : 'P', ' CCG ':'P', ' CCT ':'P', 
' CAC ':'H', ' CAT ':'H', ' CAA ':'Q', ' CAG ':'Q ', 
' CGA ':'R', ' CGC ':'R', ' CGG ':'R', ' CGT ':'R', 
' GTA ':'V', ' GTC ':'V', ' GTG ':'V', ' GTT ':'V', 
' GCA':'A', ' GCC ':'A', ' GCG ':'A', ' GCT ':'A', 
' GAC ':'D', ' GAT ':'D', ' GAA ' : 'E', ' GAG ':'E', 
' GGA ':'G', ' GGC ':'G', ' GGG ':'G', ' GGT ':'G', 
' TCA ':'S ', ' TCC ' :'S', ' TCG ' :'S', ' TCT ' :'S', 
' TTC ' :'F', ' TTT ' :'F', ' TTA ' :'L', ' TTG ':'L', 
' TAC ':'Y', ' TAT':'Y', ' TAA ':'_', ' TAG ':'_', 
' TGC ':'C', ' TGT ':'C', ' TGA ':'_', ' TGG ' : 'W' 
} ; 
 var protéine = ''; 
 for ( var i = 0 ; i < sequence. length ; i += 3 ) { 
protein += codons[sequence. sous- chaîne (i, i + 3 )] ; 
} protéine de 
 retour ; 
} 
console . log ( traduire (' ATCGATCGATCGTTGCTTATCGATCAG '));

Vous pouvez tester cet exemple ici (modifié juste dans la dernière ligne pour afficher la sortie sur la page plutôt que sur la console) :

http://lucianoabriata.altervista.org/tests/gpt3.5-code-davinci002/translatednasequence.html

Un analyseur de fréquence sonore complet basé sur JS pour les navigateurs Web, en quelques secondes !

J’ai essayé de demander au bot des applications Web complètes, et bien qu’il ait eu quelques échecs, il a trouvé de bonnes réponses dans certains cas.

Par exemple, lorsque je lui ai demandé de créer une application de spectrogramme qui lit l’entrée du microphone et dessine la sortie correspondante, j’ai obtenu une application fonctionnelle qui était presque là dès ma première tentative !

/*Créer le JavaScript, HTML et CSS d'une application Web qui entend les sons à travers le microphone et affiche un spectrogramme le mettant à jour en temps réel*/ 

//Créer le canevas 
var canvas = document . createElement ('toile'); 
toile. id = 'toile' ; 
toile. largeur = fenêtre . innerWidth ; 
toile. hauteur = fenêtre . hauteurintérieure ; 
documenter . corps . appendChild (toile); 

//Créer le contexte audio 
var audioContext = new  AudioContext(); 

//Créer l'analyseur 
var analyseur = audioContext. createAnalyser (); 
analyseur. fftTaille = 2048 ; 

//Créer le
 navigateur de microphone. mediaDevices . getUserMedia ({ audio : vrai , vidéo : faux }) 
. then ( function ( stream ) { 
 var microphone = audioContext. createMediaStreamSource (stream); 
microphone. connect (analyser); 
}) 
. attraper( function ( err ) { 
 console . log (' L' erreur gUM suivante s'est produite : ' + err); 
}); 

//Crée le tampon 
var bufferLength = analyseur. fréquenceBinCount ; 
var dataArray = new  Uint8Array (bufferLength); 

//Créer le contexte de canevas 
var canvasContext = canvas. getContext ('2d'); 

//Créer le dégradé 
var gradient = canvasContext. createLinearGradient ( 0 , 0 , 0, toile. hauteur ); 
pente. addColorStop ( 1 , '# 000000 '); 
pente. addColorStop ( 0.75 , '#ff0000'); 
pente. addColorStop ( 0.25 , '#ffff00'); 
pente. addColorStop ( 0 , '#ffffff'); 

// Dessine le spectrogramme 
function  draw ( ) { 
 requestAnimationFrame (draw); 
analyseur. getByteTimeDomainData (dataArray);        // Seule cette ligne est erronée
 canvasContext. fillStyle = ' rvb( 0 , 0 , 0 )' ; 
canvasContext. fillRect ( 0 , 0 , canvas. width , canvas. height ); 
canvasContext. largeur de ligne = 2 ; 
canvasContext. style de trait = dégradé ; 
canvasContext. débutChemin (); 
 var sliceWidth = canevas. largeur * 1.0 / bufferLength ; 
 var x = 0 ; 
 for ( var je = 0 ; je < bufferLength; je++) {
 var v = dataArray[i] / 128.0 ; 
 var y = v * toile. hauteur / 2 ; 
 if (i === 0 ) { 
canvasContext. déplacer vers (x, y); 
} else { 
canvasContext. ligneVers (x, y); 
} 
x += sliceWidth ; 
} 
canvasContext. lineTo (canvas. width , canvas. height / 2 ); 
canvasContext. trait (); 
} 
dessiner ();

J’ai marqué d’un commentaire la seule ligne qui n’était pas exactement ce dont j’avais besoin : j’ai demandé un spectre de fréquences, et cette application trace les données du domaine temporel.

Avec une simple requête (première ligne du code ci-dessous, disant « Bien mais montrez-moi le spectre des fréquences » en commentaire JavaScript), le bot a corrigé cela en remplaçant getByteTimeDomainData par getByteFrequencyData.

Voici la requête sous la forme d’un commentaire JavaScript, après quoi j’appuie sur Soumettre et j’obtiens le résultat en quelques secondes – qui a maintenant parfaitement fonctionné sans aucune intervention ! :

/*Bien mais montrez-moi le spectre des fréquences*/ 

//Créez le canevas 
var canvas = document . createElement ('toile'); 
toile. id = 'toile' ; 
toile. largeur = fenêtre . innerWidth ; 
toile. hauteur = fenêtre . hauteurintérieure ; 
documenter . corps . appendChild (toile); 

//Crée le contexte audio 
var audioContext = new  AudioContext (); //Créer la var 

de l'analyseur
analyseur = audioContext. createAnalyser (); 
analyseur. fftTaille = 2048 ; 

//Créer le
 navigateur de microphone. mediaDevices . getUserMedia ({ audio : vrai , vidéo : faux }) 
. then ( function ( stream ) { 
 var microphone = audioContext. createMediaStreamSource (stream); 
microphone. connect (analyser); 
}) 
. catch ( fonction ( euh) { 
 console . log (' L' erreur gUM suivante s'est produite : ' + err); 
}); 

//Crée le tampon 
var bufferLength = analyseur. fréquenceBinCount ; 
var dataArray = new  Uint8Array (bufferLength); 

//Créer le contexte de canevas 
var canvasContext = canvas. getContext ('2d'); 

//Créer le dégradé 
var gradient = canvasContext. createLinearGradient ( 0 , 0 , 0 , canvas. height ); 
pente.addColorStop ( 1 , '# 000000 '); 
pente. addColorStop ( 0.75 , '#ff0000'); 
pente. addColorStop ( 0.25 , '#ffff00'); 
pente. addColorStop ( 0 , '#ffffff'); 

// Dessine le spectrogramme 
function  draw ( ) { 
 requestAnimationFrame (draw); 
analyseur. getByteFrequencyData (dataArray);            //Correction ici
 canvasContext. fillStyle = ' rgb ( 0 , 0 ,0 )' ; 
canvasContext. fillRect ( 0 , 0 , canvas. width , canvas. height ); 
canvasContext. largeur de ligne = 2 ; 
canvasContext. style de trait = dégradé ; 
canvasContext. débutChemin (); 
 var sliceWidth = canevas. largeur * 1.0 / bufferLength ; 
 var x = 0 ; 
 for ( var je = 0 ; je < bufferLength ; i++) { 
 var v = dataArray[i] / 128.0 ;
 var y = v * toile. hauteur / 2 ; 
 if (i === 0 ) { 
canvasContext. déplacer vers (x, y); 
} else { 
canvasContext. ligneVers (x, y); 
} 
x += sliceWidth ; 
} 
canvasContext. lineTo (canvas. width , canvas. height / 2 ); 
canvasContext. trait (); 
} 
dessiner ();

Vous pouvez voir cette application s’exécuter sur ce lien (exactement le code ci-dessus, sauf que j’ai modifié quelques hauteurs et facteurs d’échelle pour mieux voir les tracés) :

https://lucianoabriata.altervista.org/tests/gpt3.5-code-davinci002/audioapp.html

Et voici un aperçu de l’application en cours d’exécution… voyez-la avec des dégradés de couleurs !

Créer une fonction JavaScript à partir d’un morceau de code C !

J’ai essayé de faire en sorte que le programme crée une fonction JavaScript pour calculer le point isoélectrique d’une protéine à partir de sa séquence, et malgré plusieurs tentatives, cela n’a pas fonctionné.

Cependant, j’ai trouvé en ligne ( ici ) le code C d’un programme qui fait cela. J’ai donc donné ce code source à code-davinci-002 avec une invite demandant de le convertir en JavaScript, en tant que fonction. Et cela semble avoir fonctionné !

/*Écrire une fonction JavaScript pour calculer le point isoélectrique d'une protéine à partir de sa séquence. J'ai trouvé ce code C qui fait ceci : 

#include <iostream> 
#include <cmath> 
#include <fstream> 
#include <string> 
using namespace std; 
int main(int argc, char *argv[]) 
{ 
std::string protein; 
ifstream aa ; 
aa.open("aa.txt"); //nous obtenons les données du fichier (nous supposons que nous avons un fichier aa.txt) 
aa>>protein ; //la séquence doit être en code à une lettre (lettres majuscules) 
aa.close(); 
 
int ProtLength ; // maintenant nous obtenons la longueur de la protéine 
ProtLength = protein.length(); 
 
 
car Asp = 'D'; 
char Glu = 'E'; 
char Cys = 'C';
caractère Tyr = 'Y'; 
char His = 'H'; 
char Lys = 'K'; 
car Arg = 'R'; 
entier AspNumber = 0 ; 
int GluNumber = 0 ; 
entier CysNumber = 0 ; 
int TyrNumber = 0 ; 
int HisNumber = 0 ; 
int LysNumber = 0 ; 
int NombreArg = 0 ; 
entier je=0 ; 
for ( i = 0; i <= protein.length() — 1; ++i) // nous recherchons des acides aminés chargés 
{ 
if (protein[i] == Asp) 
++AspNumber; 
si (protéine[i] == Glu) 
++GluNumber ; 
si (protéine[i] == Cys) 
++CysNumber ; 
si (protéine[i] == Tyr) 
++TyrNumber ; 
si (protéine[i] == His) 
++HisNumber ; 
si (protéine[i] == Lys) 
++LysNumber ;
si (protéine[i] == Arg) 
++ArgNumber ; 
} 
NQ double = 0,0 ; //charge nette en pH donné 
 
double QN1=0 ; //Charge C-terminale 
double QN2=0 ; //D charge 
double QN3=0; //E charge 
double QN4=0 ; //C charge 
double QN5=0 ; //Y charge 
double QP1=0; //H charge 
double QP2=0 ; //Charge NH2 
double QP3=0 ; //K charge 
double QP4=0 ; //R charge 
 
double pH = 0,0 ; 
for(;;) //la boucle infinie 
{ 
// nous utilisons les valeurs pK de Wikipedia car elles donnent une assez bonne approximation 
// si vous le souhaitez, vous pouvez la modifier 
QN1=-1/(1+pow(10,(3.65- pH))); 
QN2=-AspNumber/(1+pow(10,(3.9-pH))); 
QN3=-GluNumber/(1+pow(10,(4.07-pH)));
QN4=-CysNumber/(1+pow(10,(8.18-pH))); 
QN5=-TyrNumber/(1+pow(10,(10.46-pH))); 
QP1=HisNumber/(1+pow(10,(pH-6.04))); 
QP2=1/(1+pow(10,(pH-8,2))); 
QP3=LysNumber/(1+pow(10,(pH-10.54))); 
QP4 = ArgNumber/(1+pow(10,(pH-12,48))); 
NQ=QN1+QN2+QN3+QN4+QN5+QP1+QP2+QP3+QP4 ; 
//si vous voulez voir comment le programme fonctionne étape par étape, décommentez sous la ligne 
// cout<<”NQ=”<<NQ<<”\tat pH =”<<pH<<”\ti:” <<i++ <<endl; 
if (pH>=14.0) 
{ //vous ne devriez jamais voir ce message 
cout<<”Quelque chose ne va pas — le pH est supérieur à 14"<<endl; // 
break; 
} 
if (NQ<=0) // if this la condition est vraie on peut arrêter de calculer 
la rupture 
pH+=0.01;

 
fichier de sortie ofstream ; //nous écrivons les résultats dans outfile.txt 
outfile.open("outfile.txt"); 
outfile << "Longueur de la protéine : "<<ProtLength<<endl ; 
fichier de sortie << "Nombre d'Asp = "<<AspNumber<<endl ; 
outfile << "Nombre de Glu = "<<GluNumber<<endl; 
outfile << "Nombre de Cys = "<<CysNumber<<endl; 
outfile << “Nombre de Tyr = “<<TyrNumber<<endl; 
outfile << “Numéro de His = “<<HisNumber<<endl; 
outfile << "Nombre de Lys = "<<LysNumber<<endl; 
fichier de sortie << "Nombre d'Arg = "<<ArgNumber<<endl ; 
outfile << "Point isoélectrique de la protéine : "<<pH<<endl ; 
outfile.close(); 
cout < < "Point isoélectrique de la protéine : "<<pH<<endl ; 
système("PAUSE"); 
retourner EXIT_SUCCESS ; 
} 
*/

fonction  isoelectricPoint ( protein ) { 
 var  Asp = 'D'; 
 var  Glu = 'E'; 
 var  Cys = 'C'; 
 var  Tyr = 'Y'; 
 var  His = 'H'; 
 var  Lys = 'K'; 
 var  Arg = 'R'; 
 var  NuméroAsp = 0 ; 
 var  NuméroGlu = 0 ; 
 var  NuméroCys = 0 ; 
 var  NuméroTyr = 0 ; 
 var  HisNumber = 0; 
 var  NuméroLys = 0 ; 
 var  ArgNumber = 0 ; 
var je = 0 ; 
for (i = 0 ; i <= protein. length — 1 ; ++i) { 
 if (protein[i] == Asp ) 
++ AspNumber ; 
if (protein[i] == Glu ) 
++ GluNumber ; 
si (protéine[i] == Cys ) 
++ CysNumber ; 
si (protéine[i] == Tyr ) 
++NuméroTyr ; 
si (protéine[i] == His ) 
++ HisNumber ; 
si (protéine[i ] == Lys ) 
++ LysNumber ; 
si (protéine[i] == Arg ) 
++ ArgNumber ; 
} 
var  NQ = 0.0 ; //charge nette en pH donné 
var  QN1 = 0 ; //Charge C-terminale 
 var  QN2 = 0 ; //D charge 
 var  QN3 = 0 ; //F charge
 var  QN4 = 0 ; //C charge 
 var  QN5 = 0 ; //Y charge 
 var  QP1 = 0 ; //H charge 
 var  QP2 = 0 ; //Charge NH2 
 var  QP3 = 0 ; //K charge 
 var  QP4 = 0 ; //R charge 
var pH = 0.0 ; 
for (;;) { 
 // nous utilisons les valeurs pK de Wikipedia car elles donnent une assez bonne approximation 
 // si vous le souhaitez, vous pouvez le modifier 
 QN1= - 1 / ( 1 + Math . poe ( 10 , ( 3,65 — pH))); 
 QN2 = - AspNumber / ( 1 + Math . pow ( 10 , ( 3,9 — pH))); 
 QN3 = - GluNumber / ( 1 + Math . pow ( 10 , ( 4,07 — pH))); 
 QN4 = - CysNumber / ( 1 + Math . pow ( 10, ( 8,18 - pH))); 
 QN5 = - TyrNumber / ( 1 + Math . pow ( 10 , ( 10,46 — pH))); 
 QP1 = HisNumber / ( 1 + Math . pow ( 10 , (pH - 6,04 ))); 
 QP2 = 1 / ( 1 + Math . poe ( 10 , (pH — 8,2 ))); 
 QP3 = LysNumber / ( 1 +Mathématiques . poe ( 10 , (pH - 10,54 ))); 
 QP4 = ArgNumber / ( 1 + Math . pow ( 10 , (pH - 12,48 ))); 
 NQ = QN1 + QN2 + QN3 + QN4 + QN5 + QP1 + QP2 + QP3 + QP4 ; 
//si vous voulez voir comment le programme fonctionne étape 
 // par étape, décommentez sous la ligne 
 // cout<<”NQ=”<<NQ<<”\tat pH =”<<pH<<”\ti:” < <i++<<endl;
if (pH >= 14.0 ) { 
 //vous ne devriez jamais voir ce message 
 console . log (" Quelque chose ne va pas — le pH est supérieur à 14 "); 
 // 
 pause ; 
} 
if ( NQ <= 0 ) // si cette condition est vraie on peut arrêter de calculer 
 break ; 
pH += 0,01 ; // sinon augmenter le pH
 } 
console . log (" longueur de la protéine  : " + longueur de la protéine ); consoler . journal ("
 Nombre  d'  Asp = " + AspNumber ); 
 consoler . log (" Nombre  de  Glu = " + GluNumber ); 
 consoler . log (" Nombre  de  Cys = " + CysNumber ); 
 consoler . log (" Nombre  de  Tyr = " + TyrNumber ); 
 consoler . log (" Nombre  de  His = " + HisNumber ); 
 consoler . journal ("Nombre  de  Lys = " + LysNumber ); 
 consoler . log (" Nombre  d'  Arg = " + ArgNumber ); 
 consoler . log (“ Point isoélectrique de la protéine : “ + pH); } //Pour tester lePointisoélectrique (" DEEECYYHHKKRR ");

C’était presque, presque là… il a juste manqué que je demande une fonction, donc elle devrait idéalement renvoyer le nombre calculé.

En ajoutant cette ligne à la fin du premier bloc de code :

/*Bien mais j'aimerais qu'il renvoie le point isoélectrique calculé*/

Le système répond en réécrivant toute la fonction JavaScript, mais maintenant avec ceci ajouté à la fin :

pH de retour ;

Vous pouvez voir cela en cours d’exécution ici :

https://lucianoabriata.altervista.org/tests/gpt3.5-code-davinci002/proteinisoelectricpoint.html

Interagir pour optimiser le code

Dans ce dernier exemple, j’ai demandé au modèle d’écrire une fonction pour récupérer les données de Wikipedia, mais il utilisait jQuery donc je lui ai demandé de l’écrire à nouveau sans l’utiliser.

La nouvelle fonction n’utilisait pas jQuery, mais elle utilisait XMLHttpRequest qui est ancien et pourrait bientôt devenir obsolète… J’ai donc demandé à code-davinci-002 d’utiliser la commande fetch() plus moderne . Enfin, je lui ai demandé une version asynchrone de la fonction.

Vous pouvez voir en jaune toutes mes indications, et même quelques questions que j’ai posées au bot pour qu’il m’explique ce qu’il faisait :

Plus?

Des milliers de personnes ont publié des articles sur les capacités de ChatGPT à écrire et à corriger du code, mais mon article comporte une torsion alors que je me concentre sur JavaScript et que je vous montre les applications en cours d’exécution.

Je me demande si vous, cher lecteur, avez essayé ChatGPT ou d’autres modèles GPT3.5 pour écrire des programmes ou au moins créer, nettoyer ou vérifier des morceaux de code. Naturellement, je suis particulièrement intéressé par le code JavaScript, donc si vous avez des observations intéressantes à partager, bonnes ou mauvaises, faites-le dans les commentaires – ou écrivez peut-être votre propre article présentant plus de bons et de mauvais cas d’utilisation.