Automatische Kontexterkennung

Ich war beeindruckt, als ich merkte, dass Copilot erkennt, wie HTML und Javascript zusammenspielen. Für ein Projekt musste ich eine HTML-Tabelle mit Informationen zu Bildern erstellen. Also schrieb ich eine Tabelle mit einem Kopf, der definierte, was ich darstellen wollte:

<table>
   <thead>
       <tr>
           <th>Name</th>
           <th>Width</th>
           <th>Height</th>
       </tr>
   </thead>
   <tbody></tbody>
</table>

In meinem Skript definierte ich eine Liste der Bilder, eine Referenz zu der Tabelle und einen leeren String.

<script>
   let names = [
       "husky-bed.jpg",
       "husky-cuddles.jpg",
       "larry-ball.jpg",
       "larry-kitchen.jpg",
       "larry-raincoat.jpg",
       "larry-sleeping-on-sofa.jpg",
       "larry-sleeping.jpg",
       "socke-looking.jpg",
       "socke-with-ball.jpg",
       "socke.jpg"
   ];
   let tablebody = document.querySelector('tbody');
   let out = '';
</script>

Copilot bot mir sofort eine Schleife durch das Array an und den Code, der die Bildinformation ausliest.

for (let i = 0; i < names.length; i++) {
       let img = new Image();
       img.src = 'img/' + names[i];
       img.onload = function() {
           out += '<tr><td>' + names[i] + '</td><td>' + this.width + '</td><td>' + this.height + '</td></tr>';
           tablebody.innerHTML = out;
       }
   }

Ein anderes Mal wollte ich einen "Kopieren"-Knopf erstellen. Ich definierte ein HTML-Button-Element mit einem Datenattribut mit dem Namen "snippet" in einer HTML-Liste.

<ul id="snippets">
   <li>{{text}}<button data-snippet="{{ data }}">copy</button></li>
</ul>

Das war alles, was Copilot brauchte, um ein Script anzubieten, das nicht nur erkannte, dass ich nur auf Knöpfe reagieren will, sondern auch das Datenattribut ausliest. Da meine Knöpfe "copy" als Text hatten, erkannte das System auch, dass ich diese Information in die Zwischenablage kopieren wollte.

<ul id="snippets">
   <li>{{text}}<button data-snippet="{{ data }}">copy</button></li>
</ul>
<script>
   document.querySelector('#snippets').addEventListener('click', function(e) {
       if (e.target.tagName === 'BUTTON') {
           let snippet = e.target.getAttribute('data-snippet');
           navigator.clipboard.writeText(snippet);
       }
   });
</script>

Maschinenunterstützte Programmierung als "Gib mir ein Ergebnis aus Github oder dem Web, das meine Aufgabe erfüllt" ist nicht, worum es hier geht. Viel interessanter ist, was passiert, wenn man diese Systeme in eigenen, größeren Projekten anwendet.

Sobald das System analysiert wurde, werden bestehende Funktionen und Zusammenhänge erkannt und als erste Ergebnisse angeboten – und nicht generische Lösungen aus dem Internet.