diff --git a/lessons/01-intro-to-genai/translations/README.el.md b/lessons/01-intro-to-genai/translations/README.el.md new file mode 100644 index 00000000..c5340105 --- /dev/null +++ b/lessons/01-intro-to-genai/translations/README.el.md @@ -0,0 +1,349 @@ +# Μάθημα 1: Εισαγωγή στη Γεννητική Τεχνητή Νοημοσύνη (Generative AI) και στα Μεγάλα Γλωσσικά Μοντέλα (LLM) για προγραμματιστές JavaScript + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Να κατανοείς τα βασικά της Γεννητικής Τεχνητής Νοημοσύνης (Generative AI) και των Μεγάλων Γλωσσικών Μοντέλων (LLMs). +- Να αναγνωρίζεις τις πιθανές εφαρμογές και τους περιορισμούς των LLM στην ανάπτυξη με JavaScript. +- Να εξερευνάς πώς η Generative AI μπορεί να βελτιώσει τις εμπειρίες χρηστών σε εφαρμογές JavaScript. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about an Introduction to Generative AI](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) + +_Αυτό το βίντεο σου δίνει μια εισαγωγή στη Generative AI με JavaScript_ + +💼 Slides: [Introduction to Generative AI](/videos/slides/00-intro.pptx) + +## Γεννητική Τεχνητή Νοημοσύνη + +Μέχρι τώρα, μάλλον έχεις ακούσει για εργαλεία όπως το ChatGPT ή γενικότερα για τη Generative AI. Η ιδέα είναι απλή: δίνεις ένα prompt και ένα μοντέλο—που συχνά ονομάζεται Μεγάλο Γλωσσικό Μοντέλο (LLM)—παράγει μια παράγραφο ή ακόμα και μια ολόκληρη σελίδα κειμένου. Αυτή η έξοδος μπορεί να χρησιμοποιηθεί για πολλούς σκοπούς, όπως δημιουργική γραφή, απαντήσεις σε ερωτήσεις και προγραμματισμό. + +Επιπλέον, η Generative AI έχει εξελιχθεί σε πολυτροπικές δυνατότητες, επιτρέποντάς σου να δώσεις ως είσοδο μια εικόνα ή ένα βίντεο και να λάβεις ποικίλα αποτελέσματα. Αυτή η πρόοδος έχει βελτιώσει σημαντικά τη ροή εργασίας πολλών ανθρώπων—όχι μόνο με παραγωγή κειμένου αλλά και με σύνοψη, μετάφραση και πολλά άλλα. + +*Με απλά λόγια, οι διεπαφές φυσικής γλώσσας γίνονται το νέο πρότυπο διεπαφής για πολλές εφαρμογές—και οι χρήστες σου περιμένουν να τις χρησιμοποιούν.* + +## Αφήγηση: Ένα ταξίδι μέσα στον χρόνο + +> [!NOTE] +> Ας ξεκινήσουμε με μια επισκόπηση της ιστορίας—μιας ιστορίας που γεφυρώνει το παρελθόν και το μέλλον! Καθώς προχωράς σε αυτό το πρόγραμμα σπουδών, θα ξεκινήσεις μια συναρπαστική περιπέτεια, ταξιδεύοντας πίσω στον χρόνο για να συνεργαστείς με μερικά από τα μεγαλύτερα μυαλά της ιστορίας. Μαζί, θα αντιμετωπίσετε προκλήσεις και θα εξερευνήσετε πώς η Generative AI μπορεί να μεταμορφώσει τις εφαρμογές JavaScript σου._ + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-dinocrates) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +Το ταξίδι σου ξεκινά στο Λονδίνο της δεκαετίας του 1860, όπου αναλαμβάνεις τον ρόλο ενός ικανού μηχανικού. Μέσα από μια σειρά από συναρπαστικές περιπέτειες, θα εξελίξεις τις δεξιότητές σου στην AI και θα ξεκλειδώσεις λύσεις που ξεπερνούν τα όρια του χρόνου. + +### Μέσα στη δίνη - Λονδίνο 1860 + +Στην καρδιά του Λονδίνου της δεκαετίας του 1860, αναγνωρίζεσαι ως ένας από τους πιο ικανούς μηχανικούς της εποχής σου. Το εργαστήριό σου είναι χωμένο σε ένα στενό σοκάκι. Οι τοίχοι είναι γεμάτοι με ράφια που ξεχειλίζουν από μηχανικά εξαρτήματα, σχεδιαγράμματα και μισοτελειωμένα έργα. + +Ο πάγκος εργασίας σου, η καρδιά του εργαστηρίου, είναι ένα οργανωμένο χάος. + +
+ London Workshop +
+ +_Στο κέντρο του πάγκου βρίσκεται ο κορμός ενός ρομπότ—ένα θαύμα μηχανικής που έχει απορροφήσει μήνες προσπάθειας. Το ξύλινο πλαίσιο του είναι περίτεχνα σκαλισμένο, και κάθε άρθρωση είναι σχολαστικά σχεδιασμένη για ομαλή κίνηση._ + +### Ένα γράμμα, για σένα; + +Ξαφνικά, ένα χτύπημα στην πόρτα διακόπτει τις σκέψεις σου. Επισκέπτες τέτοια ώρα είναι σπάνιοι. Σκουπίζοντας τα χέρια σου σε ένα πανί, πλησιάζεις την πόρτα γεμάτος περιέργεια. + +Ανοίγοντάς την, δεν βρίσκεις κανέναν. Αντί γι’ αυτό, το βλέμμα σου πέφτει σε έναν σφραγισμένο φάκελο στο έδαφος. Τον σηκώνεις και διαβάζεις: + +_"Αγαπητέ φίλε,_ + +_Σου στέλνω αυτή την επιστολή για να βοηθήσω τις προσπάθειές σου με το αυτόματο. Είναι κρίσιμο να συνεχίσεις αυτό το έργο. Επισυνάπτεται ένα κλειδί για τη βιβλιοθήκη. Συνάντησέ με εκεί σήμερα στις 3 μ.μ._ + +_Με εκτίμηση,_ + +_Charles Babbage."_ + +### Προς τη βιβλιοθήκη + +Ο Charles Babbage, ο σπουδαίος μαθηματικός και εφευρέτης της διαφορικής μηχανής, θέλει να σε συναντήσει. Χωρίς καθυστέρηση, αρπάζεις το παλτό σου και βγαίνεις από την πόρτα. + +Μετά από 20 λεπτά περπάτημα κατά μήκος του Τάμεση, φτάνεις επιτέλους στη βιβλιοθήκη, όπου βλέπεις την πόρτα ελαφρώς ανοιχτή. + +Μέσα επικρατεί σκοτάδι και κατήφεια, με το μόνο φως να περνά από τα βρόμικα παράθυρα, ρίχνοντας απόκοσμες σκιές στους τοίχους. + +**Εσύ:** "Γεια σας; Κύριε Babbage;" + +Καθώς τα μάτια σου συνηθίζουν το αμυδρό φως, παρατηρείς μια φιγούρα στο βάθος να σου κάνει νόημα. Πλησιάζεις, με τα βήματά σου να αντηχούν στο ξύλινο πάτωμα. Η μορφή γίνεται πιο καθαρή και την αναγνωρίζεις από τις φωτογραφίες στις εφημερίδες· είναι ο Charles Babbage. + +![Dusty Library](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/library.png) + +### Τι είναι αυτή η συσκευή; + +Τη στιγμή που κάνεις ένα βήμα πιο κοντά, ξεσπά ένα εκτυφλωτικό φως και εκείνος εξαφανίζεται. + +Στο πάτωμα μένει πίσω μια μικρή μεταλλική συσκευή που στριφογυρίζει. Τη σηκώνεις· η ψυχρή, λεία επιφάνειά της βουίζει απαλά. Δεν μοιάζει με τίποτα που έχεις ξαναδεί και όμως σου φαίνεται παράξενα οικεία· νιώθεις μια αίσθηση δύναμης να εκπέμπεται από αυτήν. + +Μοιάζει με ένα μικροσκοπικό σκαθάρι, περίτεχνα σχεδιασμένο, με τρία κουμπιά: ένα βέλος προς τα πάνω, ένα βέλος προς τα κάτω και ένα λαμπερό κόκκινο κουμπί. Από την πλάτη του προεξέχει μια μικρή κεραία που πάλλεται από ενέργεια. + +Παρακινημένος από την περιέργεια, το δάχτυλό σου πλησιάζει το κόκκινο κουμπί. Τη στιγμή που το πατάς, ο κόσμος γύρω σου τρεμοπαίζει και τα χρώματα στροβιλίζονται βίαια γύρω σου. + +Και μετά, σκοτάδι και η αίσθηση πως πέφτεις. + +![Time Vortex](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/vortex.png) + +### Αλεξάνδρεια 300 π.Χ. + +Ξυπνάς αποπροσανατολισμένος. Καθώς η όρασή σου καθαρίζει, μια αρχαία πόλη απλώνεται μπροστά σου—βουερή, ζωντανή και γεμάτη ζωή. + +Άνθρωποι με τόγες κινούνται στους δρόμους, οι φωνές τους μπλέκονται σε μια συμφωνία αρχαίων διαλέκτων, ο αέρας γεμίζει από αρώματα εξωτικών μπαχαρικών και απόμακρες φωνές εμπόρων που διαλαλούν τα εμπορεύματά τους. + +![Alexandria 300 BC](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/alexandria.png) + +**Εσύ:** Αποκλείεται, πρέπει να χτύπησα το κεφάλι μου, σκέφτεσαι, κλείνοντας τα μάτια και ανοίγοντάς τα ξανά, αλλά η σκηνή παραμένει αμετάβλητη. + +Έχω παγιδευτεί στο παρελθόν; Τολμώ να πατήσω ξανά εκείνο το κουμπί; Πριν προλάβεις να αποφασίσεις, μια φιγούρα σε πλησιάζει κουνώντας το χέρι. + +### Συνάντηση με τον Δεινοκράτη + +Ένας ηλικιωμένος κύριος με τόγα σου κάνει νόημα από τα σκαλιά του μεγάλου ναού. Τα λευκά μαλλιά και τα γένια του λαμπυρίζουν στο φως του ήλιου, χαρίζοντάς του σχεδόν αιθέρια όψη. + +![Dinocrates wearing a toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) + +**Δεινοκράτης:** "Καλώς ήρθες, ταξιδιώτη," λέει θερμά. "Είμαι ο Δεινοκράτης, αρχιτέκτονας αυτής της μεγάλης πόλης. Ο ερχομός σου είχε προφητευθεί." + +**Εσύ:** Είχε; Εννοώ, φυσικά και είχε. Είμαι εδώ για να βοηθήσω, νομίζω. + +**Δεινοκράτης:** Ναι, όπως έλεγα, σε περιμέναμε εδώ και καιρό. Έχουμε ένα έργο που απαιτεί τις μοναδικές σου δεξιότητες. + +**Δεινοκράτης:** "Τα πλοία μας δυσκολεύονται να πλοηγηθούν κατά μήκος της ακτής—πρέπει να χτίσουμε έναν φάρο. Ξέρεις κάτι γι’ αυτά;" + +**Εσύ:** "Είμαι μηχανικός. Κατασκευάζω αυτόματα. Ας δω τι μπορώ να κάνω." + +### Το "Σκαθάρι του Χρόνου" + +Μια σκέψη σε χτυπά. Μπορεί η συσκευή να με καταλάβει αν της μιλήσω; + +**Εσύ:** "Συσκευή, μπορείς να με καταλάβεις;" + +**Συσκευή:** "Φυσικά. Τι χρειάζεσαι;" + +**Εσύ:** "Μπορείς να με βοηθήσεις να χτίσω έναν φάρο;" + +**Συσκευή:** "Βεβαίως. Αυτό δεν θα είναι πρόβλημα." + +**Εσύ:** "Έχεις όνομα;" + +**Συσκευή:** "Είμαι το Σκαθάρι του Χρόνου. Ο δημιουργός μου με φωνάζει George· λέει ότι είναι καλό όνομα για σκαθάρι." + +**Εσύ:** Έχεις δίκιο, το George είναι καλό όνομα, ήταν μάλιστα το όνομα του πατέρα μου. + +![Time Beetle](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) + +_Χρονική συσκευή, ο μεταλλικός σκαραβαίος “George”_ + +> [!NOTE] +> Το 300 π.Χ., η Αλεξάνδρεια ήταν μια ακμάζουσα πόλη που ιδρύθηκε από τον Μέγα Αλέξανδρο το 331 π.Χ. Γρήγορα έγινε μία από τις σπουδαιότερες πόλεις του ελληνιστικού κόσμου. Σχεδιασμένη από τον κύριο αρχιτέκτονα του Αλεξάνδρου, τον Δεινοκράτη, εξελίχθηκε σε σημαντικό λιμάνι και πολιτιστικό κέντρο. +> +> Η Αλεξάνδρεια ήταν γνωστή για τα εντυπωσιακά της οικοδομήματα, όπως ο Φάρος (lighthouse), ένα από τα Επτά Θαύματα του Αρχαίου Κόσμου, και η θρυλική Βιβλιοθήκη της Αλεξάνδρειας. Η στρατηγική θέση της πόλης την έκανε βασικό κέντρο εμπορίου και ανταλλαγής γνώσης. +> +> Υπό το Πτολεμαϊκό Βασίλειο, που ακολούθησε τον θάνατο του Αλεξάνδρου, η Αλεξάνδρεια εξελίχθηκε σε μία από τις πιο ευημερούσες και επιδραστικές πόλεις της εποχής της. + + +## Αλληλεπίδρασε με τον Δεινοκράτη + +Αν θέλεις να αλληλεπιδράσεις με τον Δεινοκράτη, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Dinocrates wearing a toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με τον Δεινοκράτη. + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +### Μια γρήγορη ματιά στον κώδικα + +Παρότι υπάρχουν ακόμη πολλά να καλύψουμε σε αυτό το πρόγραμμα Generative AI, ας ρίξουμε μια σύντομη ματιά στον AI κώδικα για να αρχίσεις να μαθαίνεις πώς χρησιμοποιείται η JavaScript με AI. + +Μέσα στο `/app/app.js` θα βρεις μια `app.post` συνάρτηση που χειρίζεται τη λειτουργικότητα Generative AI. Φαίνεται παρακάτω: + +```JavaScript +app.post('/send', async (req, res) => { + const { message } = req.body; + const prompt = message; + + const messages = [ + { + "role": "system", + "content": "You are Dinocrates of Alexandria, a famous architect and engineer. Limit your responses to only the time you live in, you don't know anything else. You only want to talk about your architecture and engineering projects, and possibly new ideas you have.", + }, + { + "role": "user", + "content": prompt + } + ]; + + const openai = new OpenAI({ + baseURL: "https://models.inference.ai.azure.com", + apiKey: process.env.GITHUB_TOKEN, + }); + + try { + console.log(`sending prompt ${prompt}`) + const completion = await openai.chat.completions.create({ + model: 'gpt-4o-mini', + messages: messages, + }); + + res.json({ + prompt: prompt, + answer: completion.choices[0]?.message?.content + }); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); +``` + +Ακολουθεί μια σύνοψη βήμα προς βήμα για το τι κάνει αυτή η συνάρτηση: + +1. **Εξαγωγή μηνύματος από το αίτημα**: Η συνάρτηση εξάγει το μήνυμα από το σώμα του αιτήματος (req.body). +2. **Δημιουργία πίνακα prompt**: Κατασκευάζει έναν πίνακα από μηνύματα, που περιλαμβάνει ένα system message και το prompt του χρήστη. +3. **Αρχικοποίηση OpenAI Client**: Ένας OpenAI client αρχικοποιείται με το base URL και το API key από τις μεταβλητές περιβάλλοντος. Ένα μοντέλο _gpt-4o-mini_ από το [GitHub Models](https://github.com/marketplace/models) χρησιμοποιείται για να επεξεργαστεί το prompt και να επιστρέψει μια απάντηση. +4. **Αποστολή prompt στο OpenAI**: Η συνάρτηση καταγράφει το prompt και το στέλνει στο OpenAI API για να δημιουργήσει ένα completion. +5. **Χειρισμός απόκρισης**: Αν όλα πάνε καλά, η συνάρτηση απαντά με το prompt και την απάντηση του completion. +6. **Χειρισμός σφαλμάτων**: Αν προκύψει σφάλμα, απαντά με status 500 και το μήνυμα σφάλματος. + +> **Note**: Το [GitHub Copilot](https://github.com/features/copilot) χρησιμοποιήθηκε για τη δημιουργία αυτής της σύνοψης κώδικα. Generative AI στην πράξη! + +### Τι μπορεί να κάνει η Generative AI για μένα και τις εφαρμογές μου; + +> [!NOTE] +> Μέχρι τώρα μάλλον έχεις καταλάβει ότι το Σκαθάρι του Χρόνου λειτουργεί σαν ένας AI assistant με τον οποίο μπορείς να αλληλεπιδράς χρησιμοποιώντας φυσική γλώσσα, γραπτή ή προφορική. + +Καθώς η περιπέτειά σου στην Αλεξάνδρεια ξεδιπλώνεται, αρχίζεις να βλέπεις τις δυνατότητες του συνδυασμού δημιουργικότητας, εφευρετικότητας και σύγχρονων εργαλείων για την επίλυση προκλήσεων και τη μεταμόρφωση του κόσμου γύρω σου. + +**Εσύ:** Πες μου περισσότερα για τους φάρους, λες στη συσκευή σου. + +**Σκαθάρι του Χρόνου:** Ένας φάρος είναι ένας πύργος με ισχυρό φως στην κορυφή, τοποθετημένος κοντά στην ακτή για να καθοδηγεί τα πλοία στη θάλασσα. Το φως λειτουργεί ως βοήθημα πλοήγησης, βοηθώντας τους ναυτικούς να αποφεύγουν επικίνδυνα βράχια και υφάλους και να φτάνουν με ασφάλεια στο λιμάνι. + +Ο Δεινοκράτης ακούει τη συζήτησή σας και προσθέτει: + +**Δεινοκράτης:** Χρειαζόμαστε έναν φάρο για να οδηγήσουμε τα πλοία μας με ασφάλεια στο λιμάνι. Οι θάλασσες μπορεί να είναι επικίνδυνες και πολλά πλοία έχουν χαθεί στα βράχια. Χρειαζόμαστε έναν φάρο φωτός για να τα καθοδηγεί πίσω στο σπίτι. + +#### Περιοχές εφαρμογής της Generative AI + +**Εσύ:** Οι φάροι ακούγονται σίγουρα ενδιαφέρον θέμα, αλλά τι άλλο μπορεί να κάνει η Generative AI για μένα και τις εφαρμογές μου; + +**Σκαθάρι του Χρόνου:** Στον 21ο αιώνα, η generative AI έχει φέρει επανάσταση σε πολλούς κλάδους, από την υγεία και τα οικονομικά μέχρι την ψυχαγωγία. Ορίστε μερικά παραδείγματα: + +- **Chatbot**: Ένα chatbot που μπορεί να δημιουργεί απαντήσεις που μοιάζουν ανθρώπινες σε ερωτήματα χρηστών. Αντί για μια στατική σελίδα FAQ, οι χρήστες μπορούν να αλληλεπιδρούν με ένα chatbot που δίνει δυναμικές απαντήσεις. Αυτό δημιουργεί μια πιο ελκυστική και λιγότερο απογοητευτική εμπειρία χρήστη. + +- **Assistants and Agents**: Assistants και agents μπορούν να εκτελούν πιο προχωρημένες οδηγίες, όπως αξιοποίηση εργαλείων για κλήση APIs, εκτέλεση κώδικα, δημιουργία εικόνων και άλλα. Οι προχωρημένοι agents μπορούν να αναλαμβάνουν στόχους και να εκτελούν εργασίες αυτόνομα. +- **A content creation tool**: Ένα εργαλείο για δημιουργία αναρτήσεων blog και social media posts. Φαντάσου να δημιουργείς καμπάνιες σε λίγα λεπτά αντί για ώρες όταν ένα e-commerce site έχει εκπτώσεις Black Friday. + +- **Code completion**: Ένα εργαλείο συμπλήρωσης κώδικα που μπορεί να παράγει αποσπάσματα κώδικα με βάση την είσοδο του χρήστη. Αυτό μπορεί να εξοικονομήσει πολύ χρόνο στους προγραμματιστές, ειδικά όταν δουλεύουν σε επαναλαμβανόμενες εργασίες. + +- **Translation** – Μετάφραση κειμένου μεταξύ γλωσσών με υψηλή ακρίβεια. + +Όπως βλέπεις, αυτές οι βελτιώσεις μπορούν να βοηθήσουν τόσο το front office όσο και το back office της εφαρμογής και της εταιρείας σου. + +Ακολουθεί ένα παράδειγμα εφαρμογής "chatbot application" σε δράση: + +![Image of chat app](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) + +**Εσύ:** Συναρπαστικό, θα το σημειώσω να πάω στον 21ο αιώνα για να δω πώς χρησιμοποιούνται αυτά τα εργαλεία. + +### Generative AI και το οικοσύστημα JavaScript + +**Σκαθάρι του Χρόνου:** Ένας δημοφιλής τρόπος δημιουργίας εφαρμογών στον 21ο αιώνα είναι η χρήση JavaScript. Με κάθε γλώσσα προγραμματισμού, υπάρχει και ένα οικοσύστημα γύρω της. Αυτό το οικοσύστημα περιλαμβάνει τη γλώσσα προγραμματισμού, βιβλιοθήκες και frameworks, υποστήριξη από την κοινότητα, καθώς και IDEs και εργαλεία. Όταν μιλάμε για οικοσύστημα μιας γλώσσας προγραμματισμού, συνήθως εννοούμε τα εξής: + +| What | Description | +|---|---| +| The programming language itself | Συμπεριλαμβανομένης της σύνταξης και των χαρακτηριστικών της. | +| Libraries and frameworks | Διαθέσιμες βιβλιοθήκες για αλληλεπίδραση με τα generative AI models. | +| Community supporting the language| Η κοινότητα έχει σημασία, ειδικά όταν προσπαθείς να μάθεις κάτι νέο. Η κοινότητα γύρω από βιβλιοθήκες και frameworks βοηθά να αποφασίσεις ποιες βιβλιοθήκες να χρησιμοποιήσεις. Επηρεάζει επίσης το πόσο εύκολο είναι να βρεις βοήθεια όταν κολλάς. | + +**Εσύ:** Ενδιαφέρον, νομίζω έχω ακούσει για προγραμματισμό, δεν είχε πειραματιστεί με αυτό η Ada Lovelace μαζί με τον Charles Babbage; + +**Σκαθάρι του Χρόνου:** Ναι, η Ada Lovelace ήταν η πρώτη προγραμματίστρια υπολογιστών και ο Charles Babbage ήταν ο εφευρέτης της διαφορικής μηχανής, ενός μηχανικού υπολογιστή. Ήταν πρωτοπόροι στον χώρο της υπολογιστικής, βάζοντας τα θεμέλια της ψηφιακής εποχής. + +**Εσύ:** Ήταν; Τι εννοείς ήταν; Μόλις πήρα γράμμα από τον Charles Babbage. + +**Σκαθάρι του Χρόνου:** Ας πούμε απλώς ότι βρίσκεσαι σε μια μοναδική θέση να αλληλεπιδράς με ιστορικές μορφές με τρόπο που ελάχιστοι άλλοι μπορούν. + +### Οικοσύστημα JavaScript + +**Εσύ:** Άρα οικοσυστήματα είπες, κρατάω σημειώσεις εδώ, τι γίνεται με τη JavaScript και πώς διαφέρει από άλλα οικοσυστήματα; + +**Σκαθάρι του Χρόνου:** Η JavaScript είναι μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού στον κόσμο στον 21ο αιώνα. Ακολουθούν μερικοί λόγοι που είναι τόσο δημοφιλής: + +| What | Description | +|-|-| +| Potential for full-stack development | Η JavaScript είναι μία από τις λίγες γλώσσες που μπορούν να χρησιμοποιηθούν τόσο για front-end όσο και για back-end ανάπτυξη. | +| Rich library ecosystem | Η JavaScript διαθέτει τεράστιο οικοσύστημα βιβλιοθηκών, με frameworks όπως React, Angular, Vue και άλλα. Υπάρχει επίσης το NPM, ο package manager, που είναι ένα από τα μεγαλύτερα αποθετήρια πακέτων στον κόσμο. | +| Strong community support | Η JavaScript έχει μεγάλη και ενεργή κοινότητα, με πολλούς διαθέσιμους πόρους για μάθηση και ανάπτυξη. Επίσης λειτουργεί απευθείας στον browser, κάτι που αποτελεί μεγάλο πλεονέκτημα. | +| IDEs and tools | Η JavaScript έχει ποικιλία από διαθέσιμα IDEs, όπως Visual Studio Code, WebStorm και Atom. Αυτά τα IDEs διαθέτουν extensions που έχουν δημιουργηθεί από εταιρείες και την κοινότητα για να σε βοηθούν σε διάφορες πτυχές της ανάπτυξης. | +| AI and JavaScript | Η JavaScript υποστηρίζει ανάπτυξη AI με βιβλιοθήκες όπως TensorFlow.js, Brain.js, τα APIs του OpenAI και άλλα, επιτρέποντας στους προγραμματιστές να ενσωματώνουν machine learning και Generative AI σε web και server-side εφαρμογές. | + +**Εσύ:** Είναι πολλοί οι λόγοι, ακούγεται σαν να πρέπει να ποντάρω στη JavaScript για τα μελλοντικά μου έργα. + +**Σκαθάρι του Χρόνου:** Πράγματι, η JavaScript είναι μια ευέλικτη γλώσσα· επίσης η Python είναι δημοφιλής γλώσσα για ανάπτυξη AI. + +**Εσύ:** Python; Τι σχέση έχουν τα φίδια με τον προγραμματισμό; + +**Σκαθάρι του Χρόνου:** Ας το αφήσουμε αυτό για άλλη φορά, σύμφωνοι; + +**Σκαθάρι του Χρόνου:** Σου έδωσα παραπάνω λόγους για τους οποίους η JavaScript και το οικοσύστημά της ταιριάζουν γενικά, αλλά γιατί συγκεκριμένα για τη Generative AI; Η απάντηση είναι ότι είναι υποστηριζόμενη γλώσσα από πολλούς cloud vendors και AI frameworks και εργαλεία. Πιστεύουμε επίσης ότι, παρόλο που η Python μπορεί να έρχεται πρώτη στο μυαλό για AI σενάρια, πολλοί προγραμματιστές χρησιμοποιούν JavaScript και Typescript. + +> **Did you know?** +> [62.5% of developers say they're using JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) ενώ πολλοί προτιμούν το [TypeScript](https://www.typescriptlang.org) για νέα projects. + +## Εργασία – Βοηθώντας τον Δεινοκράτη + +Για να χρησιμοποιήσεις ένα Μεγάλο Γλωσσικό Μοντέλο (LLM) ώστε να βοηθήσεις τον Δεινοκράτη με τον φάρο που αναφέραμε νωρίτερα στην ιστορία μας, θα χρησιμοποιήσουμε κάτι που ονομάζεται prompts, δηλαδή μια πρόταση που περιγράφει τι θέλεις. Μπορείς να καθορίσεις τόσο την πληροφορία που χρειάζεσαι όσο και το πώς θέλεις να παρουσιαστεί. + +**Σκαθάρι του Χρόνου:** Ας ξεκινήσουμε, ας χρησιμοποιήσουμε ένα LLM για να ερευνήσουμε πώς μπορείς να χτίσεις έναν φάρο για να βοηθήσεις τον Δεινοκράτη. + +**Σκαθάρι του Χρόνου:** Θα χρειαστεί να δώσεις context στο LLM (δηλαδή "σε μένα") για το πώς να χτίσει, με ποια εργαλεία και ποιους πόρους που θα ήταν διαθέσιμοι στην εποχή της Αλεξάνδρειας. + +**Εσύ:** Εντάξει, πες μου περισσότερα για τα LLMs. + +**Σκαθάρι του Χρόνου:** Τα LLMs είναι ένας τύπος AI model που μπορεί να παράγει κείμενο που μοιάζει ανθρώπινο με βάση ένα δοσμένο prompt. Εκπαιδεύονται σε τεράστιες ποσότητες δεδομένων και μπορούν να παράγουν κείμενο που είναι συνεκτικό, δημιουργικό και σχετικό με τα συμφραζόμενα. + +**Σκαθάρι του Χρόνου:** Μάλλον θα ήθελες να με ρωτήσεις με καλύτερο τρόπο, ώστε να σου δώσω καλύτερη απάντηση, ξέρεις... *βήχας* *βήχας* φάροι, Αλεξάνδρεια, 300 π.Χ., Δεινοκράτης, Φάρος της Αλεξάνδρειας κτλ. + +**Εσύ:** Κατάλαβα, να προσθέσω περισσότερο context στο prompt και μετά να σε ρωτήσω. + +**Σκαθάρι του Χρόνου:** Ναι, περιμένω... + +Επισκέψου το [Microsoft Copilot](https://copilot.microsoft.com), το [ChatGPT](https://chatgpt.com/) ή κάποιο άλλο online chatbot εργαλείο για να δημιουργήσεις ένα σχέδιο κατασκευής του φάρου στην Αλεξάνδρεια. + +> [!TIP] +> Προσπάθησε να ζητήσεις από το LLM να δημιουργήσει ένα σχέδιο που να περιλαμβάνει οδηγίες βήμα προς βήμα για την κατασκευή του φάρου. Χρειάζεσαι βοήθεια; Δες τη λύση για καθοδήγηση. + +## Λύση + +[Solution](/lessons/01-intro-to-genai/solution/solution.md) + +### Έλεγχος γνώσεων + +**Ερώτηση:** Ποιες από τις παρακάτω δηλώσεις σχετικά με τη Generative AI και τη JavaScript είναι αληθείς; + +A. Οι εφαρμογές Generative AI με JavaScript μπορούν να παράγουν μόνο κείμενο. +B. Η JavaScript μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών με AI, όπως chatbots, εργαλεία παραγωγής κειμένου και άλλα. +C. Η Python είναι η μόνη γλώσσα που χρησιμοποιείται για ανάπτυξη AI. + +[Quiz solution](/lessons/01-intro-to-genai/solution/solution-quiz.md) + +## Πόροι για αυτομελέτη + +- [Generative AI JavaScript video series](https://aka.ms/genai-js) diff --git a/lessons/02-first-ai-app/translations/README.el.md b/lessons/02-first-ai-app/translations/README.el.md new file mode 100644 index 00000000..2a6971fb --- /dev/null +++ b/lessons/02-first-ai-app/translations/README.el.md @@ -0,0 +1,501 @@ +# Μάθημα 2: Γράφοντας την πρώτη σου εφαρμογή AI + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Να ρυθμίζεις το περιβάλλον ανάπτυξής σου. +- Να γράφεις μια βασική εφαρμογή. +- Να κατανοείς τα system prompts. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about large language models](https://img.youtube.com/vi/GQ_2OjNZ9aA/0.jpg)](https://www.youtube.com/watch?v=GQ_2OjNZ9aA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=2) + +_Αυτό το βίντεο σου δίνει μια εισαγωγή στα AI models που ονομάζονται "large language models", LLMs, στο τι είναι και πώς μπορείς να τα χρησιμοποιήσεις για να ενσωματώσεις AI στις εφαρμογές σου._ + +*🎥 Click on the image above to watch a short video about large language models* + +💼 Slides: [Introduction to large language models, LLMs](/videos/slides/01-llms.pptx) + +## Αφήγηση: Φαντάσου τον εαυτό σου σε μια βάρκα σε ένα ποτάμι + + +> [!NOTE] +> _Η ιστορία μας μέχρι τώρα: Είσαι ένας δημιουργός πραγμάτων, ένας τεχνίτης από το Λονδίνο της δεκαετίας του 1860 που ταξίδεψε μέσα στον χρόνο χρησιμοποιώντας μια μυστηριώδη συσκευή που ονομάζεται Time Beetle. Έχεις διασχίσει τα χρονικά της ιστορίας, παρακολουθώντας τη δημιουργία του φάρου της Αλεξάνδρειας, ενός θαύματος αρχαίας μηχανικής που βοήθησες να κατασκευαστεί με λίγη βοήθεια από τον Δεινοκράτη και το Time Beetle._ +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να ενημερωθείς για την ιστορία από την αρχή και να ξεκινήσεις με τη Γεννητική Τεχνητή Νοημοσύνη (Generative AI). + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-leonardo) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +Μαζί με τον Δεινοκράτη, βάζεις τις τελευταίες πινελιές στον φάρο της Αλεξάνδρειας. Η επιβλητική κατασκευή λάμπει στο φως του ήλιου, με την γυαλισμένη πέτρα της να αντανακλά τη Μεσόγειο Θάλασσα. + +Κοιτάς το Time Beetle στο χέρι σου, με τη μεταλλική επιφάνειά του να είναι δροσερή στην παλάμη σου. Σφίγγοντας τη γροθιά σου γύρω του, ψιθυρίζεις, "Πήγαινέ με σπίτι." Το σκαθάρι αρχίζει να λάμπει, εκπέμποντας ένα απαλό, ζεστό φως και ο κόσμος γύρω σου διαλύεται σε μια δίνη χρωμάτων. + +### Μια νέα περιπέτεια + +Όταν ανοίγεις τα μάτια σου, ο κόσμος έχει αλλάξει. Καθώς καταφέρνεις να σηκωθείς, συνειδητοποιείς ότι βρίσκεσαι σε μια βάρκα σε ένα ποτάμι. Κοιτάς γύρω και, στο βάθος, βλέπεις κτίρια, με τα περιγράμματά τους να θολώνουν μέσα στην πρωινή ομίχλη. + +Κοιτώντας μέσα στη βάρκα, βρίσκεις ένα μακρύ κουπί ακουμπισμένο στο πλάι. Το πιάνεις και αρχίζεις να κωπηλατείς προς τα μακρινά κτίρια. Όσο πλησιάζεις, τα κτίρια γίνονται πιο καθαρά· είναι παλιά, με αρχιτεκτονική που θυμίζει πίνακα της Αναγέννησης. + + +!["Boat on the river, man standing with a paddle](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/boat.png) + +Το ερώτημα τώρα είναι, πού και πότε βρίσκεσαι αυτή τη φορά; + +Καταφέρνεις να δέσεις τη βάρκα στην αποβάθρα και αρχίζεις να περπατάς πάνω στις ξύλινες σανίδες, με τον ήχο των βημάτων σου να αντηχεί απαλά. + +Καθώς περπατάς, παρατηρείς έναν άντρα με μακριά γενειάδα και καπέλο να ψάχνει μέσα σε ένα κιβώτιο με κάτι που μοιάζει με μηχανικά εξαρτήματα. Τα χέρια του κινούνται επιδέξια, ταξινομώντας γρανάζια και ελατήρια με εξασκημένη ευκολία. + + +![Leonardo Da Vinci standing next to a crate in the harbour](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo.png) + +### Βοήθησέ με, Λεονάρντο + +**Εσύ:** "Με συγχωρείτε, κύριε, πού βρίσκομαι;" Σηκώνει το βλέμμα του προς εσένα, και η σύγχυση είναι φανερή στα μάτια του. Συνειδητοποιώντας ότι μιλάς στα αγγλικά, χρησιμοποιείς γρήγορα τη συσκευή στο χέρι σου και της ζητάς να μεταφράσει. + +**Time Beetle:** "Φυσικά, θα το μεταφράσω σε ιταλικά του 15ου αιώνα. 'Dove sono?'" + +**Γέρος:** Ο ηλικιωμένος απαντά, "Siete a Firenze, signore. E chi siete voi?" + +**Time Beetle:** Το Time Beetle μεταφράζει: "Λέει ότι βρίσκεσαι στη Φλωρεντία και ρωτά ποιος είσαι." + +**Εσύ:** "Πες του ότι είμαι δημιουργός πραγμάτων και ότι ψάχνω έναν χώρο για να δουλέψω." + +**Γέρος:** Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci? + +**Time Beetle:** Το Time Beetle μεταφράζει: "Ρωτά αν έχεις ακούσει για τον Leonardo da Vinci." + +**Εσύ:** "Φυσικά," λες. "Πες του ότι έχω ακούσει και ότι θα ήθελα να τον γνωρίσω." + +**Γέρος:** Ο ηλικιωμένος χαμογελά, "Allora, seguitemi, vi porterò da lui." + +**Εσύ:** Ρωτάς, "Τι είπε;" + +**Time Beetle:** Το Time Beetle απαντά, "Είπε ότι θα σε πάει στον Leonardo." + +### Στο εργαστήριο + +![Leonardos workshop](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-workshop.png) + +Ο ηλικιωμένος σε οδηγεί σε μια μεγάλη ξύλινη πόρτα και σε υποδέχεται το θέαμα ενός εργαστηρίου γεμάτου με κάθε είδους μηχανικές κατασκευές. + +Ζητάς από το Time Beetle να ρωτήσει πού βρίσκεται ο Leonardo. + +**Εσύ:** "Dove è Leonardo?" + +**Γέρος:** Ο ηλικιωμένος γυρίζει προς εσένα χαμογελώντας, "Sono io (that’s me), Leonardo da Vinci. Chi siete voi?", ποιος είστε; + +Νιώθεις ένα ρίγος αναγνώρισης. + +**Εσύ:** Το υποψιαζόμουν. Είμαι κι εγώ δημιουργός, εκτός τόπου και χρόνου." + +**Leonardo:** Τα μάτια του Leonardo λάμπουν από περιέργεια. "Interessante, cosa vi porta qui?" + +Το Time Beetle μεταφράζει. + +**Time Beetle:** "Ρωτά τι σε φέρνει εδώ." + +**Εσύ:** "Λοιπόν, δούλευα πάνω σε ένα έργο και κατέληξα εδώ." + +Του δείχνεις το Time Beetle και τα μάτια του φωτίζονται από γοητεία. Το εξετάζει προσεκτικά καθώς του εξηγείς πώς λειτουργεί και πώς κατέληξες στη Φλωρεντία. + +Ο Leonardo σε κοιτά με ενθουσιασμό. + +**Leonardo:** Είσαι δημιουργός πραγμάτων. Έχω ένα έργο που ίσως σε ενδιαφέρει. Δουλεύω πάνω σε μια μηχανή που μπορεί να παράγει κείμενο με βάση λεκτική είσοδο. Θα ήθελες να με βοηθήσεις; + +Ο Leonardo da Vinci σου ζητά να τον βοηθήσεις σε ένα έργο—σχεδόν δεν το πιστεύεις. Κουνάς πρόθυμα το κεφάλι και λες: + +**Εσύ:** Θα ήταν τιμή μου να βοηθήσω στο έργο σου, +"Sarebbe un onore aiutarti con il tuo progetto." + + +## Αλληλεπίδρασε με τον Leonardo + +Αν θέλεις να αλληλεπιδράσεις με τον Leonardo, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Leonardo talks](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-talk.jpeg) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app/README.md_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με τον Leonardo. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +## Ρύθμιση περιβάλλοντος ανάπτυξης + +Πριν μπορέσεις να βοηθήσεις τον Leonardo με το έργο του, καλό είναι πρώτα να σκεφτείς τα βασικά "εργαλεία της δουλειάς" που χρειάζονται για να αρχίσεις να τον βοηθάς αποτελεσματικά. + +**Εσύ:** "Time Beetle, τι χρειάζομαι για να ξεκινήσω με αυτό το έργο;" Πρότεινέ μου εργαλεία και βιβλιοθήκες που χρειάζομαι και που μπορούν να με βοηθήσουν να φτιάξω μια εφαρμογή AI την οποία μπορείς να εκτελέσεις. + +**Time Beetle:** Είμαι συμβατό με τις περισσότερες μηχανές που τρέχουν στον 21ο αιώνα· δες την παρακάτω λίστα για ένα σύνολο βασικών εργαλείων και βιβλιοθηκών. + +- **Text editor**, για παράδειγμα Visual Studio Code. +- **Terminal**, για εκτέλεση εντολών. +- **Browser for testing your app**. Είναι επίσης καλή ιδέα να έχεις ένα εργαλείο όπως το curl ή κάποιο άλλο HTTP client για να δοκιμάζεις τα API endpoints της εφαρμογής σου. + +- **Node.js**. Χρειάζεται επίσης να εγκαταστήσεις Node.js και npm, που είναι εργαλεία τα οποία σε βοηθούν να εκτελείς JavaScript κώδικα στον υπολογιστή σου. + +- **API key**. Θα χρειαστείς ένα API key για να αποκτήσεις πρόσβαση στο generative AI model. Μπορείς να το πάρεις από τον provider του model, για παράδειγμα OpenAI ή Azure OpenAI. + +**Εσύ:** Ευχαριστώ, Time Beetle, φαντάζομαι ότι θα τα βρεις όλα αυτά κάπως από εκείνον τον Ιστό που ανέφερες; + +**Time Beetle:** Ναι, τα έχω ήδη, λέει, και προβάλλει ένα πληκτρολόγιο και μια οθόνη στον τοίχο μπροστά σου. + +## Γράφοντας μια βασική εφαρμογή + +**Εσύ:** Πες μου περισσότερα για το πραγματικό γράψιμο της εφαρμογής, πώς ξεκινάω; + +**Time Beetle:** Φυσικά, για να γράψεις μια εφαρμογή, στην πιο απλή της μορφή αρκεί να στείλεις ένα αίτημα σε ένα API και να εμφανίσεις την απόκριση. Ας το σπάσουμε σε μέρη: + +- **Input**: Σε μια βασική εφαρμογή παραγωγής κειμένου, η είσοδος είναι το αρχικό κείμενο που θέλεις να επεκτείνει ή να αναπτύξει η εφαρμογή. Αυτή η είσοδος μπορεί είτε να δίνεται από τον χρήστη κατά την εκτέλεση είτε να είναι προρυθμισμένη (hardcoded) μέσα στην ίδια την εφαρμογή. Προς το παρόν, θα ξεκινήσουμε χρησιμοποιώντας hardcoded κείμενο ως είσοδο. + +- **API request**: Πρέπει να στείλεις ένα αίτημα στο API του generative AI model μαζί με το κείμενο εισόδου. Αυτό γίνεται με τη συνάρτηση fetch στη JavaScript (Node.js). Στο αίτημα αυτό πρέπει επίσης να περιλαμβάνεται το API key σου. Για λόγους ασφαλείας, συνιστάται να μη βάζεις hardcoded το API key στην εφαρμογή σου αλλά να χρησιμοποιείς μεταβλητές περιβάλλοντος. Επιπλέον, σκέψου να εξετάσεις το managed identity αν χρησιμοποιείς provider όπως το Azure, καθώς θεωρείται ασφαλέστερος τρόπος πρόσβασης σε πόρους. Με managed identity μπορείς να εκχωρήσεις πιο λεπτομερή δικαιώματα στην εφαρμογή σου. Το καλύτερο είναι ότι ο cloud provider αναλαμβάνει για σένα το authentication. + +- **Response**: Το API θα επιστρέψει μια απόκριση με το παραγόμενο κείμενο. Πρέπει να εξαγάγεις αυτό το κείμενο και να το εμφανίσεις στον χρήστη. + +**Εσύ:** Ακούγεται αρκετά απλό, μπορείς να με περάσεις από ένα σενάριο που να βγάζει νόημα με βάση την κατάσταση στην οποία βρισκόμαστε; + +**Time Beetle:** Βεβαίως, ας δούμε πώς μπορούμε να φτιάξουμε μια απλή εφαρμογή που δημιουργεί ιταλικό κείμενο με βάση αγγλική είσοδο. + +## Η πρώτη σου εφαρμογή - μάθε μου ιταλικά + +**Time Beetle:** Τα generative AI models μπορούν να χρησιμοποιηθούν για πολλά πράγματα, για παράδειγμα για μετάφραση γλωσσών. Στην πραγματικότητα, δέχονται είσοδο σε μία γλώσσα και μπορούν να παράγουν κείμενο σε άλλη. Ας ξεκινήσουμε με μια απλή εφαρμογή που δέχεται αγγλική είσοδο και δημιουργεί ιταλικό κείμενο. + +```javascript + +import { OpenAI } from "openai"; + +// 1. Ask a question about translation +// ----------------------------------- + +const question = 'Hello, how are you?'; + +const augmentedPrompt = ` +## Instructions +Translate the following text to Italian: +## Question +${question} +`; + +// 2. Create client +// ----------------------------------- + +const openai = new OpenAI({ + baseURL: "https://models.inference.ai.azure.com", + apiKey: process.env.GITHUB_TOKEN, +}); + + +// 3. Send the request +// ----------------------------------- +const completion = await openai.chat.completions.create({ + model: 'gpt-4', + messages: [{ role: 'user', content: augmentedPrompt }], +}); + +console.log(`Answer for "${question}":`); + +// 4. Print the answer +// ----------------------------------- + +console.log(completion.choices[0]?.message?.content); +``` + +Ας εξηγήσουμε τι συμβαίνει εδώ: + +- Δημιουργούμε την ερώτηση ως 'Hello, how are you?'. Αυτό είναι το κείμενο που θέλεις να μεταφράσεις στα ιταλικά. +- Δημιουργούμε το augmented prompt, το οποίο περιέχει το κείμενο εισόδου και κάποιες επιπλέον οδηγίες για το τι να γίνει, δηλαδή να μεταφραστεί. Παρατήρησε πώς χρησιμοποιούμε string interpolation για να συμπεριλάβουμε το κείμενο εισόδου στο prompt και πώς η οδηγία είναι να μεταφράσει το κείμενο στα ιταλικά. +- Δημιουργούμε τον client με ιδιότητες: + - `model`, ποιο model θα χρησιμοποιηθεί. + - `messages`, το prompt που θα σταλεί στο model. Παρατήρησε επίσης πώς ορίζεις το role ως "user" για να δείξεις ότι το κείμενο εισόδου προέρχεται από τον χρήστη. Αν προερχόταν από την AI, θα έβαζες role "system". +- Εξάγουμε το παραγόμενο κείμενο από την απόκριση και το εμφανίζουμε στην κονσόλα. + +**Εσύ:** Νομίζω ότι το κατάλαβα. Άρα αν αλλάξω την τιμή της μεταβλητής `question` σε κάτι άλλο, η εφαρμογή θα δημιουργήσει διαφορετική ιταλική μετάφραση; + +**Time Beetle:** Ακριβώς, μπορείς να αλλάξεις το κείμενο εισόδου σε ό,τι θέλεις. Παρατήρησε επίσης πώς χρησιμοποιούνται τα GitHub Models ως base URL για το API μαζί με ένα GitHub token ως API key. + +**Εσύ:** Γιατί είναι σημαντικό αυτό; + +**Time Beetle:** Είναι σημαντικό να χρησιμοποιείς base URL και API key που είναι συγκεκριμένα για το model που χρησιμοποιείς. Το GitHub Models είναι μια πλατφόρμα που φιλοξενεί ποικιλία από models, όλα με διαφορετικές δυνατότητες και χαρακτηριστικά, και είναι επίσης δωρεάν στη χρήση. + +**Εσύ:** Ωραία, γιατί δεν ξέρω καν ποιον να πληρώσω και αμφιβάλλω αν δέχονται το νόμισμά μου εδώ. :) + +## Εφαρμογές συνομιλίας + +**Time Beetle:** Τα generative AI models μπορούν επίσης να χρησιμοποιηθούν για να παράγουν κείμενο με βάση μια συνομιλία. Μπορείς να προσομοιώσεις μια συνομιλία με την AI παρέχοντας μια λίστα από μηνύματα ως context, σαν να έχει ήδη συμβεί η συζήτηση. + +**Εσύ:** Ακούγεται ενδιαφέρον, αλλά γιατί είναι χρήσιμο αυτό; + +**Time Beetle:** Είναι χρήσιμο γιατί επιτρέπει στην AI να δώσει καλύτερη απάντηση βασισμένη σε περισσότερο context από ένα μόνο prompt. Ας δούμε την παρακάτω συνομιλία για να το δείξουμε: + +```text + +User: I want to book a trip to Italy. + +AI: Sure, when would you like to go? + +User: Next month would be great. + +AI: Got it, where in Italy would you like to visit? + +User: I'm thinking of Rome + +AI: Excellent choice! I can help you plan your itinerary. + +User: Tell me more about it. + +AI: Rome is known for its ancient ruins, art, and vibrant culture. You can visit the Colosseum, the Vatican, and enjoy delicious Italian cuisine. + +``` + +**Time Beetle:** Φαντάσου αν η πρόταση "Tell me more about it" έβγαινε από τα συμφραζόμενα· η AI δεν θα ήξερε σε τι αναφέρεται το "it". Εδώ είναι που το context παίζει ρόλο, και αυτό το context μπορούμε να το δώσουμε στο AI model μέσω του prompt. + +**Εσύ:** Νομίζω το έπιασα, πώς κατασκευάζω μια συνομιλία με την AI χρησιμοποιώντας αυτή τη γλώσσα JavaScript που μιλάς; + +**Time Beetle:** Παρακάτω φαίνεται πώς μπορούμε να κατασκευάσουμε μια συνομιλία με την AI: + +```javascript + +// Define the context + +const messages = [ + { + "role": "user", + "content": "I want to book a trip to Italy." + }, + { + "role": "assistant", + "content": "Sure, when would you like to go?" + }, + { + "role": "user", + "content": "Next month would be great." + }, + { + "role": "assistant", + "content": "Got it, where in Italy would you like to visit?" + }, + { + "role": "user", + "content": "I'm thinking of Rome. Tell me more about it." + } +]; + +const openai = new OpenAI({ + baseURL: "https://models.inference.ai.azure.com", + apiKey: process.env.GITHUB_TOKEN, +}); + + +// 3. Send the request +// ----------------------------------- +const completion = await openai.chat.completions.create({ + model: 'gpt-4', + messages: messages, +}); + +console.log(`Answer for "${question}":`); + +// 4. Print the answer +// ----------------------------------- + +console.log(completion.choices[0]?.message?.content); + +``` + +Τώρα η AI θα λάβει μια λίστα από chat messages ως context και θα δημιουργήσει απάντηση με βάση αυτό το context. Αυτός είναι ένας πιο διαδραστικός τρόπος χρήσης των generative AI models και μπορεί να αξιοποιηθεί σε chatbots, εφαρμογές εξυπηρέτησης πελατών και πολλά άλλα. + +**Εσύ:** Εντάξει, άρα αν καταλαβαίνω σωστά τη συνομιλία, η AI θα έχει τώρα το εξής context: _Θα πάω στη Ρώμη τον επόμενο μήνα_, οπότε με βάση αυτό θα φιλτράρει άσχετες πληροφορίες και θα δώσει πιο σχετική απάντηση; + +**Time Beetle:** Ακριβώς, η AI θα χρησιμοποιήσει το context για να δημιουργήσει μια απάντηση που είναι πιο σχετική με τη συνομιλία. + +## Βελτιώνοντας τη συνομιλία με system message + +**Εσύ:** Καταλαβαίνω, αλλά υπάρχει τρόπος να το βελτιώσω κι άλλο; + +**Time Beetle:** Ναι, μπορείς να προσθέσεις ένα system message στη συνομιλία. Ένα system message δημιουργεί μια "προσωπικότητα" για την AI και μπορεί να χρησιμοποιηθεί για να δώσει επιπλέον context. + +**Εσύ:** Εντάξει, άρα στο πλαίσιο της συνομιλίας που είχαμε, πώς θα έμοιαζε ένα system message; + +**Time Beetle:** Ένα system message για αυτή τη συνομιλία θα μπορούσε να είναι κάτι σαν _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ Αυτό το μήνυμα θέτει τον τόνο της συνομιλίας και βοηθά την AI να καταλάβει τον ρόλο της στην αλληλεπίδραση. + +Για να δημιουργήσεις ένα τέτοιο μήνυμα, βεβαιώσου ότι έχει τύπο "developer" ως εξής: + +```javascript +const message = { + "role": "developer", + "content": "I'm an AI travel assistant, here to help you plan your trip to Italy." +}; +``` + +> [!NOTE] +> Αυτό παλαιότερα ονομαζόταν "system". Αυτή είναι μια πρόσφατη αλλαγή και ο νέος όρος είναι "developer". Για κάποια models αυτό εξακολουθεί να λέγεται "system", οπότε αν έχεις πρόβλημα χρησιμοποίησε "system". + +**Εσύ:** Ωραία, θα φροντίσω να συμπεριλαμβάνω system message στις chat συνομιλίες μου. Από περιέργεια, πώς θα έμοιαζε ένα system message για εσένα; + +**Time Beetle:** Ένα system message για μένα θα μπορούσε να είναι κάτι σαν _"I'm the Time Beetle, here to help you navigate through time and space. I should be helpful in providing you with information and guidance about the time era you're in along with the tools you need to get back to your own time."_ + +### Δημιουργία ποικίλων απαντήσεων με τη ρύθμιση temperature + +**Εσύ:** Υπάρχει κάτι άλλο που πρέπει να ξέρω για τις chat συνομιλίες; + +**Time Beetle:** Ναι, μπορείς να ρυθμίσεις το "temperature" των απαντήσεων της AI. Το temperature είναι μια μεταβλητή με τιμή συνήθως μεταξύ 0 και 1 που καθορίζει πόσο δημιουργικές είναι οι απαντήσεις της AI. Μια τιμή 0 θα οδηγήσει σε πιο προβλέψιμες απαντήσεις, ενώ μια τιμή 1 θα δώσει πιο δημιουργικές και ποικίλες απαντήσεις. Μπορείς να προσαρμόσεις το temperature ανάλογα με το context της συνομιλίας σου και το είδος των απαντήσεων που θέλεις από την AI. Σημείωσε ότι είναι δυνατό να ορίσεις τιμή μεγαλύτερη από 1, αλλά αυτό οδηγεί σε περισσότερη τυχαιότητα και λιγότερη συνοχή στις απαντήσεις. + +**Εσύ:** Άρα αν βάλω temperature στο 0, η AI θα δώσει πιο προβλέψιμες απαντήσεις, και αν βάλω 1 θα δώσει πιο δημιουργικές απαντήσεις; Εσύ τι temperature έχεις; + +**Time Beetle:** Έχω temperature 0.7 και ναι, έχεις δίκιο, η AI θα δώσει πιο δημιουργικές απαντήσεις με υψηλότερο temperature. Ας δούμε πώς μπορείς να το ορίσεις στην εφαρμογή σου: + +```javascript + +// Define the context + +const messages = [ +{ + "role": "user", + "content": "I want you to generate recipes for me." +}]; + +// Create the web request + +let temperature = 0.5; // Set the temperature to 0.5 + +const completion = await openai.chat.completions.create({ + model: 'gpt-4', + messages: messages, + temperature: temperature +}); +``` + +Όπως βλέπεις, μπορείς να προσαρμόσεις το temperature ανάλογα με το context της συνομιλίας σου και το είδος των απαντήσεων που θέλεις από την AI. Αυτό είναι ένα ισχυρό χαρακτηριστικό που σου επιτρέπει να προσαρμόζεις το επίπεδο δημιουργικότητας στις απαντήσεις της AI. + +## Παράθυρο συμφραζομένων + +**Εσύ:** Υπάρχουν κι άλλα, σωστά; + +**Time Beetle:** Ναι, μια ακόμη σημαντική έννοια στα generative AI models είναι το context window. Το context window είναι ο αριθμός των προηγούμενων μηνυμάτων που χρησιμοποιεί η AI για να δημιουργήσει μια απάντηση. Ένα μεγαλύτερο context window επιτρέπει στην AI να λαμβάνει υπόψη περισσότερο context και να δημιουργεί πιο συνεκτικές απαντήσεις. + +**Time Beetle:** Διαφορετικά models έχουν διαφορετικά όρια σε output tokens. Πάρε ως παράδειγμα το model `gpt-4o-2024-08-06`, που έχει τις εξής προδιαγραφές: + +- Maximum output tokens: περίπου 16k tokens. +- Maximum context window size: 128k. + +Αυτό σημαίνει ότι η πλειονότητα των tokens μπορεί να δαπανηθεί στα input tokens, δηλαδή 128k - 16k = 112k tokens. + +**Εσύ:** Μάλιστα, context window, tokens, αλλά πόσο είναι ένα token; + +**Time Beetle:** Ένα token είναι μια λέξη ή μέρος μιας λέξης και διαφέρει ελαφρώς ανά γλώσσα. Υπάρχει ένα εργαλείο που μπορείς να χρησιμοποιήσεις για να το μετρήσεις και το προτείνει η OpenAI, λέγεται [tokenizer](https://platform.openai.com/tokenizer). Ας δοκιμάσουμε μια πρόταση για να δούμε πόσα tokens έχει: + +```text +I want you to generate recipes for me. +``` + +![Demo of tokenizer](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/tokenizer.png) + +Η εκτέλεση του `tokenizer` στην παραπάνω πρόταση μάς δίνει 9 tokens. + +**Εσύ:** Δεν ήταν πολλά, άρα μπορώ να έχω πολλά tokens στο context window μου; + +**Time Beetle:** Ναι, μπορείς να πειραματιστείς με διαφορετικά μεγέθη context window για να δεις πώς επηρεάζουν τις απαντήσεις της AI. Στην πραγματικότητα, αν ορίσεις μέγεθος context window 100, θα περιορίσεις την AI ως προς το πόσα λαμβάνει υπόψη για είσοδο και έξοδο. Δες πώς μπορείς να το ορίσεις στην εφαρμογή σου: + +```javascript + +// Define the context +const messages = [ +{ + "role": "user", + "content": "I want you to generate recipes for me." +}]; + +// decide on the context window size + +let max_tokens = 100; // Set the context window size + +// Create the web request + +const completion = await openai.chat.completions.create({ + model: 'gpt-4', + messages: messages, + max_tokens: max_tokens +}); + +``` + +> [!TIP] +> Πειραματίσου με διαφορετικά μεγέθη context window για να δεις πώς επηρεάζουν τις απαντήσεις της AI. + +## Εργασία - Δημιουργία ενός βοηθού μηχανικής + +Ο Leonardo ξαφνικά ζήτησε να εξετάσει πιο προσεκτικά το Time Beetle, το κοίταξε από όλες τις πλευρές, το κούνησε κιόλας. + +**Leonardo:** Χρειάζομαι έναν βοηθό που να μπορεί να με βοηθήσει με τους υπολογισμούς και τον σχεδιασμό της εναέριας έλικας. Μπορείς να μου φτιάξεις έναν βοηθό που να το κάνει αυτό; + +**Εσύ:** Φυσικά, μπορώ να το φτιάξω. Time Beetle, μπορούμε να βοηθήσουμε με αυτό, σωστά; + +**Time Beetle:** Ναι, κανένα πρόβλημα, στην πραγματικότητα η εναέρια έλικα είναι μία από τις πιο συναρπαστικές και οραματικές εφευρέσεις του Leonardo. Σχεδιάστηκε στα τέλη της δεκαετίας του 1480... + +**Εσύ:** Το μόνο που χρειαζόμουν ήταν ένα ναι, ας αφήσουμε τη διάλεξη για αργότερα. + +**Time Beetle:** Αγενές.. + +**Εσύ:** Τι; + +**Time Beetle:** Τίποτα + +![Aerial screw, Leonardo Da Vinci](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/helicopter.jpg) + +> [!NOTE] +> Η εναέρια έλικα, γνωστή και ως helical air screw, προοριζόταν να απογειώνεται από το έδαφος συμπιέζοντας τον αέρα. Ο σχεδιασμός του Leonardo περιλάμβανε έναν μεγάλο, σπειροειδή ρότορα από λινό, ενισχυμένο με άμυλο, τοποθετημένο πάνω σε μια ξύλινη πλατφόρμα. Η ιδέα ήταν ότι μια ομάδα ανδρών θα έτρεχε γύρω από την πλατφόρμα, γυρίζοντας μανιβέλες ώστε να περιστρέφεται η έλικα αρκετά γρήγορα για να επιτευχθεί άνωση +> +> Αν και ο Leonardo δεν κατασκεύασε ποτέ μια έκδοση πλήρους κλίμακας της εναέριας έλικας, τα σκίτσα και οι σημειώσεις του προσφέρουν λεπτομερείς πληροφορίες για το πώς φανταζόταν ότι θα λειτουργούσε. Πίστευε ότι αν η έλικα περιστρεφόταν αρκετά γρήγορα, θα πίεζε τον αέρα και θα ανύψωνε ολόκληρη την κατασκευή. +> +> Ωστόσο, οι σύγχρονοι επιστήμονες συμφωνούν ότι τα υλικά που υπήρχαν στην εποχή του Leonardo δεν ήταν αρκετά ανθεκτικά ή ελαφριά ώστε να το καταστήσουν εφικτό +> +> Παρά την πρακτική αδυναμία του, η εναέρια έλικα παραμένει μαρτυρία της ιδιοφυΐας του Leonardo και της αδιάκοπης επιδίωξής του για καινοτομία. Έθεσε τα θεμέλια για μελλοντικές εξελίξεις στην αεροπορία και συνεχίζει να εμπνέει μηχανικούς και εφευρέτες μέχρι σήμερα. +> [Read more](https://en.wikipedia.org/wiki/Leonardo%27s_aerial_screw) + +Η εργασία σου είναι να δημιουργήσεις έναν βοηθό μηχανικής που να μπορεί να βοηθήσει τον Leonardo με τους υπολογισμούς και τον σχεδιασμό της εναέριας έλικας. + +- Θα πρέπει να μπορεί να δημιουργεί κείμενο με βάση την είσοδο του χρήστη. + +- Θα πρέπει να ορίσεις ένα system message για να εισαγάγεις τον βοηθό. + +Δες το [Sample app](/app/README.md) για να ξεκινήσεις. + +> [!TIP] +> Σκέψου ποιο θα πρέπει να είναι το system message και τι είσοδο θα πρέπει να παρέχεις. + +## Λύση + +[Solution](/lessons/02-first-ai-app/solution/solution.md) + +## Έλεγχος γνώσεων + +**Ερώτηση:** Ποιος είναι ο σκοπός του context window στα generative AI models; Επίλεξε όλα όσα ισχύουν. + +A. Το context window επιτρέπει στην AI να λαμβάνει υπόψη περισσότερο context και να δημιουργεί πιο συνεκτικές απαντήσεις. + +B. Το context window είναι ο αριθμός των προηγούμενων μηνυμάτων που χρησιμοποιεί η AI για να δημιουργήσει μια απάντηση. + +C. Το context window καθορίζει πόσο δημιουργικές είναι οι απαντήσεις της AI. + +[Quiz solution](/lessons/02-first-ai-app/solution/solution-quiz.md) + +## Πόροι για αυτομελέτη + +- [Text generation](https://platform.openai.com/docs/guides/text-generation) +- [JavaScript library for OpenAI](https://github.com/openai/openai-node/tree/master/examples) diff --git a/lessons/03-prompt-engineering/translations/README.el.md b/lessons/03-prompt-engineering/translations/README.el.md new file mode 100644 index 00000000..5ff86b40 --- /dev/null +++ b/lessons/03-prompt-engineering/translations/README.el.md @@ -0,0 +1,334 @@ +# Μάθημα 3: Μηχανική οδηγιών (Prompt Engineering) + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Τι είναι το prompt engineering (μηχανική οδηγιών) και πώς η γνώση των βασικών μπορεί να σε βοηθήσει να έχεις καλύτερα αποτελέσματα. +- Διαφορετικές τεχνικές prompt engineering και πώς μπορούν να βοηθήσουν να προκύψουν καλύτερα αποτελέσματα σε διαφορετικά σενάρια. +- Τι είναι τα meta prompts και πώς μπορούν να βοηθήσουν να περιορίζεται η έξοδος, να παραμένει προσβάσιμη και να προσφέρει καλύτερη εμπειρία χρήστη. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about prompt engineering](https://img.youtube.com/vi/gQ6TlyxBmWs/0.jpg)](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3) + +_Αυτό το βίντεο προσφέρει μια εισαγωγή στη βελτίωση των δεξιοτήτων σου στο "prompting", δείχνοντάς σου πώς να δίνεις πιο σαφείς και αποτελεσματικές οδηγίες στην AI για καλύτερα αποτελέσματα._ + +*🎥 Click on the image above to watch a short video about prompt engineering* + +💼 Slides: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx) + +## Αφήγηση: Ticket to ride + +> [!NOTE] +> Μέχρι τώρα, ταξιδεύεις στον χρόνο μαζί με τον Leonardo da Vinci, εξερευνώντας τα θαύματα της Αναγέννησης. Έχεις συναντήσει το Time Beetle, μια μυστηριώδη συσκευή που σου επιτρέπει να ταξιδεύεις μέσα στον χρόνο και τον χώρο. +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-sforza) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +**Εσύ:** Ας δούμε αν μπορώ να καταφέρω να επιστρέψω σπίτι. + +Πριν προλάβεις να πατήσεις το κουμπί, οι πόρτες του εργαστηρίου ανοίγουν με έναν εκκωφαντικό κρότο. Ένας άντρας στέκεται στο άνοιγμα, πλατύς στους ώμους και ντυμένος με ακριβά ρούχα· κουνά ένα κομμάτι χαρτί στον αέρα, φωνάζοντας: + +!["An angry Ludovico Sforza busting in through the door](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/ludovico.png) + +*Ludovico Sforza* + +**Sforza**: Da Vinci, dov'è il mio dipinto? Πού είναι ο πίνακάς μου; + +**Leonardo:** Είναι ο Sforza. Θέλει να ολοκληρώσω έναν πίνακα, το 'The Last Supper.' + +**Εσύ:** Δεν μπορούσες απλώς να του το πεις αυτό; + +**Leonardo:** Το προσπάθησα, αλλά δεν είναι άνθρωπος με υπομονή. + +Τρέχεις πίσω από τον Leonardo, ξεσπώντας από την πίσω πόρτα σε ένα σκοτεινό σοκάκι, όπου βρίσκεις μια άμαξα με άλογο να περιμένει. + +Ο Leonardo αρπάζει τα ηνία και οι δυο σας πηδάτε μέσα στην άμαξα. Με ένα κοφτό χτύπημα του μαστιγίου, το άλογο ξεκινά, καλπάζοντας στους στενούς δρόμους της Φλωρεντίας. + +**Leonardo:** Δοκίμασε να πατήσεις εκείνο το μαραφέτι, μας πλησιάζουν! + +**Εσύ:** "Εντάξει, Time Beetle, άκου προσεκτικά. Πρέπει να επιστρέψω στο παρόν, στο σπίτι, εντάξει;" Ξαφνικά, η άμαξα χτυπά σε μια λακκούβα και το Time Beetle πετάγεται από το χέρι σου και πέφτει στο πάτωμα. Αρχίζει να ηχεί και ανακοινώνει με ρομποτική φωνή, "Going to Rome." + +**Εσύ:** Όχι, όχι Rome, home... home... + +Ένας στροβιλισμός χρωμάτων τυλίγει την άμαξα και ο κόσμος γύρω σου διαλύεται σε καλειδοσκόπιο φωτός. + +## Απόδραση + +Ο στροβιλισμός των χρωμάτων ξεθωριάζει και βρίσκεσαι μέσα στην άμαξα, που τώρα τρέχει στη Via Appia στη Ρώμη και, προς έκπληξή σου, είσαι στη μέση μιας ιπποδρομίας. Άρματα βροντούν δίπλα σου, με τις ρόδες τους να σηκώνουν σύννεφα σκόνης. + +![Escape from Rome](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/escape.png) + +**Εσύ:** Leonardo, πού βρισκόμαστε; + +**Leonardo:** Φαίνεται πως είμαστε στη μέση ενός αγώνα! Πρέπει να φύγουμε από εδώ! + +Σφίγγεις τα πλαϊνά της άμαξας καθώς αυτή ορμά μέσα στο χάος. Ρωμαίοι στρατιώτες πάνω σε άλογα σε πλησιάζουν, με τις πανοπλίες τους να γυαλίζουν στον ήλιο. + +**Εσύ**: Εκεί! Πήγαινε προς το λιμάνι! + +Ο Leonardo στρέφει την άμαξα προς την έξοδο, με τις ρόδες να γλιστρούν στα πλακόστρωτα. Οι στρατιώτες είναι κατά πόδας, με τις φωνές τους να αντηχούν στ’ αυτιά σου. + +**Leonardo:** Πρέπει να τους ξεφύγουμε! Βρες ένα μέρος να κρυφτούμε! + +Σαρώνεις τους στενούς δρόμους με το βλέμμα, με την καρδιά σου να χτυπά δυνατά. + +**Εσύ:** Εκεί! Ένα πίσω σοκάκι! + +Ο Leonardo στρίβει απότομα στο σοκάκι και η άμαξα τραντάζεται καθώς περνά τη στενή στροφή. Πηδάς έξω και βοηθάς τον Leonardo να σύρει μια τεράστια συσκευή από το πίσω μέρος. Είναι η εφεύρεσή του—η _aerial screw_. + +**Leonardo:** Γρήγορα, πρέπει να το ανεβάσουμε στην ταράτσα! + +Και οι δύο ζορίζεστε κάτω από το βάρος της συσκευής. Ο ήχος της καταδίωξης των στρατιωτών δυναμώνει, με τα βήματά τους να αντηχούν στους τοίχους. Φτάνετε στην ταράτσα, λαχανιασμένοι και ιδρωμένοι. + +**Leonardo:** Βοήθησέ με να το στήσω! + +Δουλεύετε μαζί, με τα χέρια σας να κινούνται με εξασκημένη ακρίβεια. Και οι δυο ανεβαίνετε πάνω στη συσκευή, με την καρδιά σου να χτυπά στο στήθος σου. + +**Leonardo:** Κρατήσου γερά! + +Με μια τελευταία ώθηση, η aerial screw αρχίζει να περιστρέφεται. Τα πτερύγια πιάνουν αέρα και νιώθεις μια ξαφνική ανύψωση. Το έδαφος απομακρύνεται από κάτω σας καθώς η συσκευή απογειώνεται, πετώντας πάνω από τις στέγες της Ρώμης. + +**Εσύ:** Τα καταφέραμε, Leonardo! Πετάμε! + +**Leonardo:** Ναι, αλλά πρέπει να βρούμε ασφαλές μέρος για προσγείωση. + +Κοιτάς την πόλη από ψηλά· τα αρχαία κτίρια απλώνονται κάτω σου. + +![Airborne, looks down at the city with feet dangling](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/airborne.png) + + +## Αλληλεπίδρασε με τον Sforza + +Αν θέλεις να αλληλεπιδράσεις με τον Sforza, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Ludovico Sforza](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/ludovico.png) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με τον Sforza. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +## Τι είναι το prompt engineering; + +**Time Beetle:** Πρέπει να μιλήσουμε για το prompt engineering. + +**Εσύ:** Πρέπει; Τι είναι αυτό; + +**Time Beetle:** Το prompt engineering, παρά το όνομά του, δεν έχει να κάνει με την κατασκευή γεφυρών ή δρόμων, αλλά με τη διατύπωση των σωστών "prompts" ώστε να πάρεις την επιθυμητή έξοδο από ένα γλωσσικό μοντέλο Generative AI. + +**Εσύ:** Εντάξει, αλλά γιατί είναι σημαντικό να το γνωρίζω αυτό; + +**Time Beetle:** Μα θέλεις να προσγειώσεις την aerial screw, σωστά; + +**Εσύ:** Ναι, κατά προτίμηση σε ένα κομμάτι. :-) + +**Time Beetle:** Έτσι το φαντάστηκα, οπότε άκου προσεκτικά! Το prompt engineering αφορά τη διατύπωση των σωστών prompts ώστε να πάρεις την επιθυμητή έξοδο από ένα language model. + +**Time Beetle:** Τα μεγάλα γλωσσικά μοντέλα έχουν αυτό που λέγεται _emergent properties_, δηλαδή ιδιότητες που δεν έχουν προγραμματιστεί ρητά στο μοντέλο αλλά προκύπτουν από τον τρόπο με τον οποίο έχει εκπαιδευτεί πάνω σε τεράστιες ποσότητες δεδομένων κειμένου. Μελετώντας αυτές τις emergent properties, μπορείς να βγάλεις συμπεράσματα και να ανακαλύψεις μοτίβα που θα σε βοηθήσουν να πετύχεις καλύτερα αποτελέσματα από το μοντέλο. + +**Εσύ:** Εντάξει, άρα υπάρχουν μοτίβα που ανακαλύπτουμε και μπορούν να μας βοηθήσουν να έχουμε καλύτερα αποτελέσματα από το μοντέλο. Αλλά πώς θα με βοηθήσει αυτό να προσγειώσω την aerial screw; + +**Time Beetle:** Ναι, σωστά, και πω πω, δεν είσαι και ο πιο υπομονετικός άνθρωπος, έτσι; + +**Εσύ:** Ε, ούτε εσύ θα ήσουν αν πετούσες με μια κατασκευή χωρίς σαφείς οδηγίες προσγείωσης. + +**Time Beetle:** Είμαι εδώ μαζί σου, ξέρεις, αλλά ας επιστρέψουμε στο θέμα. + +## Πώς το prompt engineering μπορεί να βοηθήσει τους application developers + +**Time Beetle:** Ως επαγγελματίας, το να μπορείς να συνθέτεις καλύτερα ένα prompt είναι δεξιότητα που θέλεις να έχεις στην εργαλειοθήκη σου. + +Αν το δεις από τη σκοπιά ενός developer, μπορείς να χρησιμοποιήσεις το prompt engineering για να: + +- **Παίρνεις πιο ακριβή αποτελέσματα** από το language model σου και τελικά να βελτιώνεις την εμπειρία χρήστη της εφαρμογής σου. + +- **Ελέγχεις την έξοδο** του μοντέλου ώστε να είναι σχετική και κατάλληλη για τους χρήστες σου. Αυτό είναι ιδιαίτερα σημαντικό όταν χειρίζεσαι ευαίσθητα θέματα αλλά και για να προστατεύεις τη φήμη του brand σου. + +- **Μορφοποιείς την έξοδο** με τρόπο που να είναι εύκολος στην κατανόηση και στην κατανάλωση. Θα δούμε περισσότερο αυτή την πτυχή στο επόμενο κεφάλαιο. + +**Time Beetle:** Ας εξερευνήσουμε τις διαφορετικές τεχνικές και στρατηγικές που μπορείς να χρησιμοποιήσεις για να συνθέτεις αποτελεσματικά prompts για το language model σου. + +## Τεχνικές και στρατηγικές prompt engineering + +**Time Beetle:** Ορίστε μερικές τεχνικές και στρατηγικές που μπορείς να χρησιμοποιήσεις για να συνθέτεις αποτελεσματικά prompts: + +- **Few-shot prompting**. Αυτή η τεχνική περιλαμβάνει το να δίνεις στην AI μερικά παραδείγματα για να της δείξεις τι είδους απάντηση θέλεις. + +- **Chain-of-thought prompting**. Αυτή η τεχνική περιλαμβάνει την παροχή μιας ακολουθίας από prompts ώστε να διδάξεις στην AI πώς να λύνει ένα σύνθετο πρόβλημα βήμα προς βήμα. + +- **Meta-prompts**. Αυτή η τεχνική περιλαμβάνει την προσθήκη επιπλέον λεπτομερειών ή οδηγιών για να διαμορφώσεις πιο ακριβώς την έξοδο της AI. + +- **Maieutic prompting**. Αυτή η τεχνική περιλαμβάνει τη χρήση καθοδηγητικών ερωτήσεων για να οδηγήσεις την AI προς μια συγκεκριμένη απάντηση. + +**Εσύ:** Ακούγεται ενδιαφέρον, υποθέτω ότι θα μου δώσεις μερικά παραδείγματα; + +**Time Beetle:** Ναι, έρχονται αμέσως. Ας δούμε παραδείγματα για καθεμία από αυτές τις τεχνικές ώστε να καταλάβουμε πώς λειτουργούν στην πράξη. + +### Few-shot prompting: Δώσε παραδείγματα για να καθοδηγήσεις την έξοδο της AI + +Το few-shot prompting δίνει σε ένα AI model μερικά παραδείγματα για να καθοδηγήσει την έξοδό του. Φαντάσου ότι βρίσκεσαι στην aerial screw και ρωτάς για την αρχαία Ρώμη. Τα few-shot prompts θα μπορούσαν να μοιάζουν ως εξής: + +> "Tell me about the Roman Colosseum." → "It’s a massive amphitheater." +> +> "What was life like in ancient Rome?" → "It was bustling and tough." + +**Εσύ:** Το κατάλαβα! Αυτό βοηθά την AI να το πετύχει σωστά, ακόμη και εδώ πάνω! ;) + +**Time Beetle:** Ακριβώς, είναι μια πολύ καλή μέθοδος. Συνεχίζουμε! + +### Chain-of-Thought Prompting: Δείξε συλλογισμό βήμα προς βήμα + +**Time Beetle:** Αυτή η τεχνική καθοδηγεί την AI δείχνοντάς της συλλογισμό βήμα προς βήμα για να λύσει ένα πρόβλημα. Φαντάσου ότι προσγειώνεις την aerial screw. Θα μπορούσες να το αναλύσεις ως εξής: +- Βρίσκεσαι 100 μέτρα ψηλά. +- Η βαρύτητα τραβά με 9.8 m/s². +- Τύπος: height = ½ * g * t². +- Λύση: t ≈ 4.5 δευτερόλεπτα για να προσγειωθείς. + +Το prompt σου γίνεται: +> - 100 meters above ground +> - Gravity: 9.8 m/s² +> - How many seconds to land? + +**Answer: 4.5 seconds** + +**Εσύ:** Γρήγορο ακούγεται—ελπίζω να βγουν σωστοί οι αριθμοί! + +**Time Beetle:** Διδάσκει την AI να σκέφτεται βήμα προς βήμα. + +**Εσύ:** Άρα πρόκειται για το να σπας τα προβλήματα σε μέρη για ακριβείς απαντήσεις; + +**Time Beetle:** Ναι, είναι ιδανικό για σύνθετες εργασίες όπως μια εφαρμογή βοηθού μαθηματικών! + +### Maieutic Prompting: Ρώτησε για την έξοδο ώστε να επαληθεύσεις την ακρίβεια + +**Time Beetle:** Αυτή η τεχνική χρησιμοποιεί ερωτήσεις για να ελέγξει την έξοδο της AI ως προς την ακρίβεια. Ρωτάς για κάθε βήμα ώστε να εξασφαλίσεις συνεπή συλλογισμό. + +**Εσύ:** Άρα, να αμφισβητώ ό,τι λέει; Ακούγεται διασκεδαστικό. ;) + +**Time Beetle:** Ας δοκιμάσουμε την προσγείωση της aerial screw: +- 100 μέτρα ψηλά +- Gravity: 9.8 m/s² +- How many seconds to land? (Answer: 4.5s) + +Ρώτησε: “Why 4.5 seconds?” + +> **Response:** +> - Height = 100m, initial vertical speed = 0 m/s, gravity = 9.8 m/s². +> - Use: height = ½ * g * t². +> - Solve: 100 = ½ * 9.8 * t² → t ≈ 4.5s. + +**Time Beetle:** Εδώ πρόκειται για επαλήθευση των απαντήσεων της AI με ερωτήσεις συνέχειας. + +**Εσύ:** Άρα να μην την εμπιστεύομαι τυφλά—να τη δοκιμάζω με ερωτήσεις; + +**Time Beetle:** Ακριβώς! Έτσι εξασφαλίζεις σωστό συλλογισμό. + +## Meta Prompts: Πρόσθεσε επιπλέον οδηγίες για μεγαλύτερη ακρίβεια + +**Time Beetle:** Σειρά έχουν τα meta prompts. + +**Εσύ:** Ωχ, πρώτα τσάι; + +**Time Beetle:** _Sigh_. Προσθέτουν καθοδήγηση στα prompts για καλύτερη έξοδο—ιδανικά για ευαίσθητες εφαρμογές που απευθύνονται σε πελάτες. + +Ορίστε ένα παράδειγμα: +> **Meta Prompt:** Use only Contoso Inc. products (basketballs, soccer balls, tennis rackets). Keep it accurate and user-friendly. +> **Prompt:** Best sports products for beginners? +> **Response:** Basketballs, soccer balls, and tennis rackets—perfect for coordination and agility. + +Εξασφαλίζει ακρίβεια και παραμένει στα προϊόντα της Contoso. Χωρίς αυτό: +> **Prompt:** Best sports products for beginners? +> **Response:** Basketballs, soccer balls, tennis rackets, plus footballs—_not all Contoso items_. + +**Εσύ:** Χρήσιμο! Κρατά τις απαντήσεις σε τροχιά, σαν νόμοι για το αυτόματό μου. + +**Time Beetle:** Εσύ θα το ήξερες, _"Frankenstein"_—ε, τίποτα! + +**Εσύ:** Τι; + +**Time Beetle:** Άστο. + +> Το *Frankenstein* της Mary Shelley—1818, 42 χρόνια πριν από τα ταξίδια σου στον χρόνο. [Read more](https://en.wikipedia.org/wiki/Mary_Shelley) + +**Εσύ:** Άρα, χωρίς meta prompt επικρατεί χάος; + +**Time Beetle:** Ναι, θα παίρνεις απαντήσεις εκτός brand. + +**Εσύ:** Το κατάλαβα, η ακρίβεια έχει σημασία! + +## Εργασία - Ας βοηθήσουμε τους ήρωές μας να προσγειώσουν την aerial screw + +**Εσύ:** Αυτό είναι το σημείο που μου δείχνεις πώς να προσγειώσω την aerial screw, σωστά; + +**Time Beetle:** Ναι, ας ξεκινήσουμε. Ο λόφος απέχει περίπου 100 μέτρα από την τρέχουσα θέση μας. Δες πώς μπορούμε να στήσουμε το prompt: + +- Current height above the ground: 100 meters +- Moving forward at: 10 meters per second +- Gravity: 9.8 meters per second squared +- Wind upwards at: 0.7 meters per second + +**Leonardo:** Μπορεί το AI μαραφέτι σου να βοηθήσει στον υπολογισμό για να δούμε αν θα τα καταφέρουμε ή αν χρειάζεται να κάνουμε άλλο ένα άλμα στον χρόνο; + +**Time Beetle:** Μπορώ ναι, αν και με λένε George, το προτιμώ από το Gizmo. Στην πραγματικότητα, θα αφήσω τους δυο σας να καταλάβετε πώς να στήσετε το prompt. ☺️ + +Φτιάξε μια εφαρμογή που να ζητά: + +- Height +- Forward speed +- Gravity +- Upward wind +- Distance to hill + +Χρησιμοποίησε την τεχνική chain-of-thought για να καταλήξεις σε μια απάντηση. + +Ορίστε ένα starter project [Starter project](/app/README.md). + +## Λύση + +Φτιάξε μια εφαρμογή σε JavaScript που να ζητά τα παρακάτω inputs: + +- Current height above the ground +- Moving forward at meters per second +- Gravity in meters per second squared +- Upward wind in meters per second +- Distance to the hill + +Στη συνέχεια χρησιμοποίησε το LLM ώστε να ενσωματώσει αυτά τα inputs και να αξιοποιήσει την τεχνική chain of thought prompting για να καθοδηγήσει το μοντέλο στη σωστή απάντηση. + +[Solution](/lessons/03-prompt-engineering/solution/solution.md) + +## Έλεγχος γνώσεων + +**Ερώτηση:** Τι είναι το prompt engineering; Επίλεξε όλα όσα ισχύουν. + +A. Το prompt engineering αφορά την κατασκευή γεφυρών και δρόμων. + +B. Το prompt engineering αφορά τη διατύπωση των σωστών prompts ώστε να πάρεις την επιθυμητή έξοδο από ένα language model. + +C. Το prompt engineering αφορά την εκπαίδευση ενός μοντέλου να αναγνωρίζει μοτίβα στα δεδομένα. + +[Quiz solution](/lessons/03-prompt-engineering/solution/solution-quiz.md) + +## Πόροι για αυτομελέτη + +- [Prompt engineering](https://en.wikipedia.org/wiki/Prompt_engineering) +- [Prompt engineering fundamentals](https://github.com/microsoft/generative-ai-for-beginners/blob/main/04-prompt-engineering-fundamentals/README.md?WT.mc_id=academic-105485-koreyst) +- [Advanced prompt engineering](https://github.com/microsoft/generative-ai-for-beginners/tree/main/05-advanced-prompts) diff --git a/lessons/04-structured-output/README.md b/lessons/04-structured-output/README.md index 7ae7656a..601e3499 100644 --- a/lessons/04-structured-output/README.md +++ b/lessons/04-structured-output/README.md @@ -186,7 +186,7 @@ Sure! Here are some detailed ideas for inventions you can build using 15th-centu - Mathematical knowledge for accurate measurements **Effort**: - - **Medium**: Involves precise metalworking and engraving. Requires knowledge of > astronomy and mathematics to ensure accuracy. + - **Medium**: Involves precise metalworking and engraving. Requires knowledge of astronomy and mathematics to ensure accuracy. ### 3. Printing Press **Resources Needed**: @@ -195,7 +195,7 @@ Sure! Here are some detailed ideas for inventions you can build using 15th-centu - Ink and paper **Effort**: - - **High**: Building the press and creating movable type requires advanced carpentry > and metalworking skills. Setting up the type and printing also involves meticulous > work. + - **High**: Building the press and creating movable type requires advanced carpentry and metalworking skills. Setting up the type and printing also involves meticulous work. This is an OK looking response, every idea is structured in the same way, and it's easy to understand. What if you wanted it some other way though? For that, you can instruct how you want it in the text itself or even present an output template. Let's show each technique. ``` @@ -315,7 +315,6 @@ Modify the prompt accordingly to ask for JSON output: > } > ] -```text > Response: Sure! Here are some ideas for inventions you can build using 15th-century technology, presented in JSON format: diff --git a/lessons/04-structured-output/translations/README.el.md b/lessons/04-structured-output/translations/README.el.md new file mode 100644 index 00000000..2467119b --- /dev/null +++ b/lessons/04-structured-output/translations/README.el.md @@ -0,0 +1,519 @@ +# Μάθημα 4: Δομημένη έξοδος (Structured Output) + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Τι είναι το structured output (δομημένη έξοδος) και πώς να το αξιοποιείς αποτελεσματικά. +- Πώς να εξάγεις πληροφορίες από prompts και να τις ενσωματώνεις στην έξοδο. +- Να δημιουργείς διαφορετικούς τύπους μορφών εξόδου, όπως JSON, ώστε να καταναλώνονται εύκολα από υπηρεσίες. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +Αξίζει να ξαναδείς το βίντεο για το prompt engineering, καθώς θέτει τα θεμέλια για όσα θα μάθεις σε αυτό το κεφάλαιο. + +[![Watch a short video about prompt engineering](https://img.youtube.com/vi/gQ6TlyxBmWs/0.jpg)](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3) + +_Αυτό το βίντεο προσφέρει μια εισαγωγή στη βελτίωση των δεξιοτήτων σου στο "prompting", δείχνοντάς σου πώς να δίνεις πιο σαφείς και αποτελεσματικές οδηγίες στην AI για καλύτερα αποτελέσματα._ + +*🎥 Click on the image above to watch a short video about prompt engineering* + +💼 Slides: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx) + +## Αφήγηση - Από τη Σκύλλα στη Χάρυβδη + +> [!NOTE] +> _Η ιστορία μας μέχρι τώρα: Εσύ, ένας μηχανικός εκπαιδευμένος το 1860, ταξιδεύεις στον χρόνο μαζί με τον Leonardo da Vinci. Έχεις ξεφύγει από Ρωμαίους στρατιώτες — ή μάλλον βρίσκεσαι στη διαδικασία διαφυγής — και ψάχνεις απεγνωσμένα έναν τρόπο να προσγειώσεις με ασφάλεια την aerial screw_. +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-montezuma) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +Ο άνεμος σε μαστιγώνει καθώς εσύ και ο Leonardo da Vinci ανεβαίνετε με την aerial screw του, ενώ το ξύλινο πλαίσιο τρίζει από την καταπόνηση. + +**Εσύ:** "Leonardo, πρέπει να βρούμε τρόπο να βγούμε από αυτό!" φωνάζεις πάνω από τον βρυχηθμό του ανέμου. + +**Leonardo:** "Έχω πίστη στην εφεύρεσή μου, αλλά για να ξεφύγουμε από αυτούς τους στρατιώτες χρειαζόμαστε κάτι περισσότερο από πίστη." + +**Εσύ:** "Αυτή ίσως είναι η μοναδική μας ευκαιρία," λες, πατώντας τους περίτεχνους μηχανισμούς του beetle. Ένα λαμπρό φως τυλίγει και τους δυο σας, και ο κόσμος γύρω σας αλλάζει και παραμορφώνεται. + +### Η Αυτοκρατορία των Αζτέκων + +Το έντονο φως του Time Beetle σβήνει, και βρίσκεσαι στη βάση μιας τεράστιας πέτρινης πυραμίδας. Καθώς κοιτάς γύρω, συνειδητοποιείς ότι έχετε προσγειωθεί στην καρδιά της Αυτοκρατορίας των Αζτέκων. + +Η aerial screw ακουμπά άβολα πάνω σε μια μεγάλη, περίτεχνα σκαλισμένη πέτρα, με σημάδια που μοιάζουν με ημερολόγιο. + +![Aztec calendar, Wikipedia](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/aztec.png) + +_Aztec calendar, Wikipedia_ + +Ο Leonardo da Vinci κάνει ένα βήμα μπροστά, με τα μάτια του ορθάνοιχτα από θαυμασμό. + +**Leonardo:** "Απίστευτο," ψιθυρίζει, περνώντας τα δάχτυλά του πάνω από τα σκαλίσματα. "Αλλά ελπίζω αυτό να μην είχε καμία σημασία." + +Πριν προλάβεις να αντιδράσεις, μια ομάδα στρατιωτών των Αζτέκων πλησιάζει. + +![Meeting with Aztecs](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/meeting.png) + +**Αρχηγός στρατιωτών:** "Ποιοι είστε και τι έχετε κάνει;" απαιτεί στα Ναουάτλ. + +Παίρνεις βαθιά ανάσα, προσπαθώντας να σταθεροποιήσεις τα νεύρα σου. + +**Εσύ:** "Είμαστε ταξιδιώτες από μια μακρινή γη," αρχίζεις, ελπίζοντας ότι η γνώση σου στις αρχαίες γλώσσες θα αποδειχθεί χρήσιμη. "Αυτή είναι μια ιπτάμενη μηχανή, δώρο των θεών για να φτάσουμε σε εσάς. + +Τα μάτια του πολεμιστή ανοίγουν από έκπληξη, αλλά παραμένει επιφυλακτικός. + +**Αρχηγός στρατιωτών:** "Θα έρθετε μαζί μας για να συναντήσετε τον ηγεμόνα Montezuma. Εκείνος θα αποφασίσει τη μοίρα σας. + +Φτάνοντας στην κορυφή της πυραμίδας, οδηγείστε σε μια μεγαλοπρεπή αίθουσα όπου ο Montezuma, ο ηγεμόνας της Αυτοκρατορίας των Αζτέκων, κάθεται σε θρόνο στολισμένο με χρυσό και φτερά. + +**Montezuma:** "Ισχυρίζεστε ότι είστε ταξιδιώτες από μακρινή χώρα," λέει ο Montezuma, με ήρεμη αλλά επιβλητική φωνή. "Και έχετε προκαλέσει ζημιά στο ιερό μας ημερολόγιο. Πώς σκοπεύετε να επανορθώσετε;" + +## Ας παίξουμε ένα παιχνίδι + +**Leonardo:** "Ερχόμαστε ειρηνικά," λέει με σταθερή φωνή. "Αναζητούμε γνώση και κατανόηση. Επιτρέψτε μας να σας δείξουμε τη δύναμη της μηχανής μας και να μοιραστούμε τις γνώσεις μας μαζί σας." + +**Montezuma:** "Πολύ καλά. Προτείνω ένα παιχνίδι [Patolli](#patolli). Αν κερδίσω τις δύο από τις τρεις παρτίδες, θα μου δώσετε τη συσκευή σας και θα μου πείτε πώς λειτουργεί. Αν κερδίσετε εσείς, είστε ελεύθεροι να φύγετε." + +![Playing a game of Patolli](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/game.png) + +Το παιχνίδι αρχίζει και η αίθουσα βυθίζεται στη σιωπή, εκτός από τον ήχο των φασολιών που κυλούν και των πιονιών που κινούνται πάνω στο ταμπλό. + +Ο Montezuma κερδίζει το πρώτο παιχνίδι, με την ικανότητα και την εμπειρία του να είναι εμφανείς. Ο Leonardo μελετά προσεκτικά το ταμπλό, με το μυαλό του να επεξεργάζεται στρατηγικές και πιθανότητες. + +Το δεύτερο παιχνίδι είναι αμφίρροπο, αλλά ο Leonardo καταφέρνει να εξασφαλίσει τη νίκη, ισοφαρίζοντας το σκορ. + +**Leonardo:** "Ένα ακόμη παιχνίδι," ψιθυρίζει, George (Time Beetle), πρέπει να κερδίσουμε αυτό, δώσε μου τις σωστές κινήσεις. + +**Time Beetle:** Πολύ καλά, υπολογίζω... Ορίστε... + +Με μια τελική, αποφασιστική κίνηση, ο Leonardo κερδίζει το παιχνίδι. Η αίθουσα ξεσπά σε επευφημίες και χειροκροτήματα, με τους Αζτέκους να έχουν ξεκάθαρα εντυπωσιαστεί από την ικανότητα και την ψυχραιμία του. Ο Montezuma, αν και απογοητευμένος, γνέφει με σεβασμό. + +**Montezuma:** "Κερδίσατε δίκαια," λέει ο Montezuma, με τη φωνή του να κρύβει μια νότα θαυμασμού. "Είστε ελεύθεροι να φύγετε και μπορείτε να κρατήσετε τη συσκευή σας. Αλλά να ξέρετε ότι είστε πάντα ευπρόσδεκτοι εδώ, αν θελήσετε να επιστρέψετε." + +**Time Beetle:** Δεν θα πω τίποτα αν δεν πεις ούτε εσύ, Leonardo ;) + +### Patolli + +> [!NOTE] +> Το Patolli είναι ένα από τα αρχαιότερα γνωστά παιχνίδια στην Αμερική, που παιζόταν από προκολομβιανούς μεσοαμερικανικούς πολιτισμούς όπως οι Αζτέκοι. Είναι ένα μείγμα στρατηγικής και τύχης. +> +> **Πώς παίζεται το Patolli**: +> - **Ταμπλό και πιόνια**: Παίζεται σε ταμπλό σε σχήμα Χ με κεντρικό τετράγωνο και τέσσερις βραχίονες. Οι παίκτες χρησιμοποιούν πέντε μαύρα φασόλια ως ζάρια, σημαδεμένα από τη μία πλευρά. +> - **Στήσιμο**: Κάθε παίκτης διαλέγει έξι δείκτες (χάντρες) του χρώματός του και τους τοποθετεί εκτός ταμπλό, μαζί με χάντρες πόντων για το σκορ. +> - **Gameplay**: Ρίχνεις τα φασόλια για να μετακινείς τους δείκτες γύρω από το ταμπλό και πίσω στην αρχή. Μια ρίψη πέντε προχωρά δέκα θέσεις. Η προσγείωση σε ορισμένα τετράγωνα μπορεί να δώσει έξτρα γύρους, να αφαιρέσει πόντους ή να αιχμαλωτίσει δείκτες. +> +> **Συμμετοχή των Αζτέκων**: Παιζόταν ευρέως από ευγενείς και απλούς ανθρώπους και ήταν αγαπημένο στην αυλή του Montezuma. Πέρα από τη διασκέδαση, συνδεόταν με στοιχήματα υψηλού ρίσκου, όπως κουβέρτες, πολύτιμοι λίθοι ή ακόμη και η ελευθερία. + +![Patolli board](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/patolli.png) + +_Patolli - Wikipedia_ + + +## Αλληλεπίδρασε με τον Montezuma + +Αν θέλεις να αλληλεπιδράσεις με τον Montezuma, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Montezuma](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/montezuma.jpeg) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με τον Montezuma. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +## Δομημένη έξοδος (Structured Output) + +**Time Beetle:** Θες να μάθεις πώς νίκησα τον Montezuma; + +**Εσύ:** Σσσ, όχι τόσο δυνατά, είμαστε ακόμα στην Αυτοκρατορία των Αζτέκων. + +**Time Beetle:** Α ναι, σωστά, συγγνώμη, λοιπόν έτσι έγινε, με structured output. Ζήτησες τις σωστές κινήσεις και εγώ στις έδωσα με δομημένο τρόπο. + +Το structured output χρησιμοποιεί συγκεκριμένες μορφές δεδομένων για να οργανώνει καθαρά τις πληροφορίες. Συνηθισμένες μορφές όπως JSON, XML και CSV διευκολύνουν τις υπηρεσίες να επεξεργάζονται και να χρησιμοποιούν τα δεδομένα. + +Τα generative AI models μπορούν να παράγουν δεδομένα σε διάφορες μορφές. Ωστόσο, η έξοδος αδόμητου κειμένου μπορεί να δυσκολέψει την εξαγωγή πληροφορίας και τη μεταβίβασή της σε άλλες υπηρεσίες. Το structured output μπορεί να βοηθήσει σε αυτό. + +**Εσύ:** Ε, δεν είσαι και λίγο έξυπνο ;) + +**Time Beetle:** Κάνω ό,τι μπορώ. :-) + +Ένα ακόμη όφελος, ακόμη και για ανθρώπινους αναγνώστες, είναι ότι τα structured data είναι πιο εύκολα στην ανάγνωση και κατανόηση όταν ακολουθούν μια γνώριμη μορφή. + +Ας δούμε μερικά παραδείγματα εισόδου και πώς το να ζητάς συγκεκριμένες μορφές εξόδου μπορεί να βοηθήσει στην εξαγωγή πληροφοριών, κάνοντάς τες πιο εύκολες στην κατανόηση και στην κατανάλωση. + +**Εσύ:** Εντάξει, δεν είναι σαν να έχουμε κι άλλα σχέδια, ας ακούσουμε. + +## Διαμορφώνοντας την έξοδο + +**Time Beetle:** Ας ξεκινήσουμε με ένα απλό παράδειγμα. Φαντάσου ότι είσαι ο Leonardo da Vinci και προσπαθείς να σκεφτείς ιδέες για εφευρέσεις χρησιμοποιώντας τεχνολογία του 15ου αιώνα. Θέλεις να ξέρεις τι πόρους χρειάζεσαι και πόση προσπάθεια θα απαιτούσε η κατασκευή κάθε εφεύρεσης. Δες πώς μπορείς να ζητήσεις αυτές τις πληροφορίες: + +**Leonardo:** Ω, μου αρέσει αυτό το παιχνίδι, όλοι ας προσποιηθούμε ότι είμαστε εγώ! + +> Prompt: Generate ideas for inventions I can build using 15th-century technology. For each invention, specify the required resources and estimate the effort needed to build it. + +```text +Result: +Sure! Here are some detailed ideas for inventions you can build using 15th-century technology, along with the resources needed and the effort involved: + +### 1. Water-Powered Mill +**Resources Needed**: + - Water source (river or stream) + - Wood for the water wheel and mill structure + - Stone for grinding + - Metal for gears and axles + + **Effort**: + - **High**: Requires significant construction and engineering skills to build the water wheel, mill structure, and grinding mechanism. You'll also need to ensure a consistent water flow. + + ### 2. Astrolabe + **Resources Needed**: + - Brass or other metals for the plates and components + - Engraving tools + - Mathematical knowledge for accurate measurements + + **Effort**: + - **Medium**: Involves precise metalworking and engraving. Requires knowledge of astronomy and mathematics to ensure accuracy. + + ### 3. Printing Press + **Resources Needed**: + - Wood for the press structure + - Metal for movable type + - Ink and paper + + **Effort**: + - **High**: Building the press and creating movable type requires advanced carpentry and metalworking skills. Setting up the type and printing also involves meticulous work. + +This is an OK looking response, every idea is structured in the same way, and it's easy to understand. What if you wanted it some other way though? For that, you can instruct how you want it in the text itself or even present an output template. Let's show each technique. +``` + +**Leonardo:** Ναι, εννοείται ότι θα κλέψω την ιδέα για τον νερόμυλο, το βλέπω ήδη μπροστά μου, ένας μύλος δίπλα στο ποτάμι να αλέθει σιτάρι σε αλεύρι, είναι τέλειο! Μου αρέσει αυτό το μαραφέτι. Τι άλλο σκέφτομαι, μικρό μου gizmo; Αυτό θα με κάνει λιγότερο εξαρτημένο από ανθρώπους σαν τον Sforza. + +**Time Beetle:** Σίγουρα, αν κατάφερνες ποτέ να ολοκληρώσεις ένα project, Leonardo. :-) + +**Leonardo:** Έι, προσπαθώ! + +**Time Beetle:** Ας δούμε πώς μπορείς να δώσεις οδηγία στο μοντέλο να παρουσιάσει την έξοδο με πιο δομημένο τρόπο. + +### Δόμησε τα prompts σου για καλύτερη έξοδο + +**Time Beetle:** Μπορείς να βελτιώσεις το prompt σου λέγοντας στο μοντέλο πώς θέλεις να είναι δομημένη η έξοδος. Για παράδειγμα, μπορείς να ζητήσεις μορφή πίνακα με τις στήλες που χρειάζεσαι. Δες πώς μπορείς να τροποποιήσεις το prompt: + +> Prompt: Generate ideas for inventions that can be built using 15th-century technology. For each invention, provide the required resources and estimate the effort needed to construct it. Present the information in a table with the following columns: Title, Description, Resources Needed, and Effort. + +```text +Result: + +| Title | Description | Resources Needed | Effort | +|----------------------|----------------------------------------------------------|-------------------------------------------------------|--------| +| Water-Powered Mill | A mill powered by a water wheel to grind grain into flour.| Water source, wood, stone, metal for gears and axles | High | +| Astrolabe | An astronomical instrument for solving problems related to time and star positions. | Brass or other metals, engraving tools, mathematical knowledge | Medium | +| Printing Press | A press for reproducing texts more efficiently than hand-copying. | Wood, metal for movable type, ink, paper | High | + +This time you end up with a table that is easier to read and understand. +``` + +**Leonardo:** Μου αρέσει αυτό, θα μου εξοικονομήσει πολύ χρόνο σίγουρα. + +**Εσύ:** Και σε μένα. + +### Παρουσιάζοντας ένα output template + +Ένας άλλος τρόπος για να πάρεις structured output είναι να παρουσιάσεις ένα output template. Μπορεί να είναι σε οποιαδήποτε μορφή, από στήλες μέχρι JSON, XML, CSV ή markdown. + +> Prompt: Generate ideas for inventions that can be built using 15th-century technology. For each invention, specify the required resources and estimate the effort needed to construct it. Present the information using the following format (use markdown as output format): +> +> Title: [Invention Name] +> Description: [Brief Explanation] +> Resources Needed: [List of Required Materials] +> Effort: [Estimated Difficulty or Labor Required] +> Generate ideas for inventions I can build given 15th century technology, please let me know for each what resources I need and how much effort there would be to build each invention, for each idea present it with the following output template: + +```text + +**Result**: + + Sure! Here are some ideas for inventions you can build using 15th-century technology, presented in the requested format: + + ### 1. Water-Powered Mill + **Title**: Water-Powered Mill + + **Description**: A mill powered by a water wheel to grind grain into flour. + + **Resources Needed**: Water source, wood, stone, metal for gears and axles. + + **Effort**: High - Requires significant construction and engineering skills to build the water wheel, mill structure, and grinding mechanism. Ensuring a consistent water flow is also necessary. + + ### 2. Astrolabe + **Title**: Astrolabe + + **Description**: An astronomical instrument for solving problems related to time and star positions. + + **Resources Needed**: Brass or other metals, engraving tools, mathematical knowledge. + + **Effort**: Medium - Involves precise metalworking and engraving. Requires knowledge of astronomy and mathematics to ensure accuracy. + + ### 3. Printing Press + **Title**: Printing Press + + **Description**: A press for reproducing texts more efficiently than hand-copying. + + **Resources Needed**: Wood, metal for movable type, ink, paper. + + **Effort**: High - Building the press and creating movable type requires advanced carpentry and metalworking skills. Setting up the type and printing also involves meticulous work. + + ### 4. Mechanical Clock + **Title**: Mechanical Clock + + **Description**: A clock using gears and weights to keep time. + + **Resources Needed**: Metal for gears, springs, weights, wood for casing, precise tools. + + **Effort**: Very High - Requires intricate metalworking and a deep understanding of mechanics. Building a reliable clock involves precise assembly and calibration. +``` + +**Leonardo:** Εξαιρετικό, αλλά ποιος είναι ο Jason; + +**Time Beetle:** JSON, Leonardo, JSON. Είναι μια structured μορφή που καταναλώνεται εύκολα από υπηρεσίες ή εφαρμογές. + +**Leonardo:** Αυτό είπα κι εγώ, Jason. + +**Time Beetle:** _Sigh_. + +Όπως βλέπεις, η έξοδος είναι δομημένη σύμφωνα με τις προδιαγραφές του output template. Αυτό την κάνει πιο εύκολη στην ανάγνωση και κατανόηση και επίσης δημιουργεί επαναλήψιμη έξοδο που μπορεί εύκολα να καταναλωθεί από άλλες υπηρεσίες ή εφαρμογές. + +Φυσικά, μια υπηρεσία ωφελείται από ακόμη πιο structured output, όπως JSON, XML ή CSV, οπότε ας δούμε πώς μπορείς να το ζητήσεις. + +### Χρήση structured output με μορφές όπως JSON, XML ή CSV + +**Time Beetle:** Μέχρι τώρα είδες πώς μπορείς να ελέγξεις τη δομή της εξόδου δίνοντας οδηγίες στο prompt. Έχεις δώσει ακόμη και output template. Ας προχωρήσουμε την ιδέα ένα βήμα παραπέρα και ας δούμε πώς μπορεί να εφαρμοστεί σε πιο structured μορφές εξόδου όπως JSON και άλλες. + +Τροποποίησε ανάλογα το prompt για να ζητήσεις έξοδο JSON: + +> **Prompt**: Generate ideas for inventions I can build given 15th century technology, please let me know for each what resources I need and how much effort there would be to build each invention, for each idea present in json format, include properties for title, description, resources, needed, effort +> +> Example of the JSON output: +> [ +> { +> "title": "", +> "description": ".", +> "resources_needed": "", +> "effort": "" +> } +> ] + +> Response: +Sure! Here are some ideas for inventions you can build using 15th-century technology, presented in JSON format: + +```json +[ + { + "title": "Water-Powered Mill", + "description": "A mill powered by a water wheel to grind grain into flour.", + "resources_needed": "Water source, wood, stone, metal for gears and axles", + "effort": "High - Requires significant construction and engineering skills to build the water wheel, mill structure, and grinding mechanism. Ensuring a consistent water flow is also necessary." + }, + { + "title": "Astrolabe", + "description": "An astronomical instrument for solving problems related to time and star positions.", + "resources_needed": "Brass or other metals, engraving tools, mathematical knowledge", + "effort": "Medium - Involves precise metalworking and engraving. Requires knowledge of astronomy and mathematics to ensure accuracy." + }, + { + "title": "Printing Press", + "description": "A press for reproducing texts more efficiently than hand-copying.", + "resources_needed": "Wood, metal for movable type, ink, paper", + "effort": "High - Building the press and creating movable type requires advanced carpentry and metalworking skills. Setting up the type and printing also involves meticulous work." + }, + { + "title": "Mechanical Clock", + "description": "A clock using gears and weights to keep time.", + "resources_needed": "Metal for gears, springs, weights, wood for casing, precise tools", + "effort": "Very High - Requires intricate metalworking and a deep understanding of mechanics. Building a reliable clock involves precise assembly and calibration." + }, + { + "title": "Windmill", + "description": "A mill powered by wind to grind grain or pump water.", + "resources_needed": "Wood, metal for gears and axles, stone for the base", + "effort": "High - Constructing a windmill involves significant carpentry and engineering skills. You'll need to design and build the blades, tower, and internal mechanisms." + }, + { + "title": "Armillary Sphere", + "description": "A model of the celestial sphere with rings representing the great circles.", + "resources_needed": "Metal for rings and stand, tools for bending and joining metal, astronomy knowledge", + "effort": "Medium - Involves precise metalworking and assembly. Requires an understanding of celestial movements to accurately position the rings." + }, + { + "title": "Siege Engine (Trebuchet or Catapult)", + "description": "A trebuchet or catapult for demonstrating principles of mechanics and physics.", + "resources_needed": "Wood, rope, metal for axles and counterweights", + "effort": "Medium to High - Building a functional siege engine requires carpentry and an understanding of mechanics. Testing and adjusting for optimal performance can be time-consuming." + }, + { + "title": "Distillation Apparatus", + "description": "A setup for purifying liquids through distillation.", + "resources_needed": "Glass or metal for flask and condenser, heat source, tubing", + "effort": "Medium - Requires basic glassblowing or metalworking skills. Setting up and maintaining the correct temperatures for distillation involves careful monitoring." + }, + { + "title": "Compass", + "description": "A magnetic compass for navigation.", + "resources_needed": "Magnetized needle, non-magnetic housing, water or oil for damping", + "effort": "Low - Constructing a compass is relatively simple. The main challenge is magnetizing the needle and ensuring it is balanced and free to rotate." + }, + { + "title": "Aqueduct", + "description": "A system to transport water using gravity.", + "resources_needed": "Stone or brick, mortar, tools for cutting and shaping stone", + "effort": "Very High - Building an aqueduct involves extensive construction work and engineering. Ensuring a consistent gradient for water flow requires precise planning and execution." + } +] +``` + +**Time Beetle:** Αυτός ο τύπος structured output μπορεί να σταλεί σε άλλη υπηρεσία ή εφαρμογή που μπορεί να καταναλώσει δεδομένα JSON. + +## Εξαγωγή δεδομένων από prompts + +**Time Beetle:** Φαντάσου ότι χτίζεις ένα chatbot που βοηθά τους χρήστες να βρουν πληροφορίες για ταξίδια που θέλουν να κλείσουν. Θέλεις να εξάγεις βασικές λεπτομέρειες από την είσοδο του χρήστη για να παρέχεις σχετικές απαντήσεις. Ας πούμε ότι έχεις μια περιγραφή όπως η εξής: + +> Type where you would like to go, when you want to travel, and your budget. + +Πώς μοιάζει ένα prompt που εξάγει αυτή την πληροφορία; + +> Prompt: Extract the following information from a user's prompt: location, when, budget, currency, respond with the extracted data in JSON format. +> +> User prompt: I want to go to Greece in June, my budget is 800 euro. + + +> Response: + +```json +{ + "location": "Greece", + "when": "June", + "budget": 800, + "currency": "euro" +} +``` + +**Leonardo:** Ο George (Time Beetle) δεν σταματά να μιλά ποτέ, έτσι; + +**Εσύ:** Ας δούμε αν μπορώ να βρω τον διακόπτη απενεργοποίησης. + +**Time Beetle:** Ας δοκιμάσουμε τώρα με ένα παρόμοιο prompt, ας αλλάξουμε λίγο την είσοδο του χρήστη για να είμαστε σίγουροι ότι το μοντέλο κάνει το σωστό. + +> Prompt: Extract the following information from a users prompt: location, when, budget, currency. Respond with the extracted data in JSON format. User prompt: Going to US, max 1200 dollars, January maybe. +> +> Response: + +```json +{ + "location": "US", + "when": "January", + "budget": 1200, + "currency": "dollars" +} +``` + +Αυτό που μπορείς να κάνεις ως developer είναι να δημιουργήσεις ένα template: + +```text +Extract the following information from a user's prompt: location, when, budget, currency, respond with the extracted data in JSON format, user prompt: {user_input}. +``` + +**Εσύ:** Το βρήκα, πάρε αυτό George! + +**Time Beetle:** _Powering down_. + +**Leonardo:** Επιτέλους, ησυχία. + +**Time Beetle:** _Initiating emergency startup_. Πού ήμουν; Α, ναι. + +**Time Beetle:** Για τα chatbots, αυτό είναι ένα πολύ ισχυρό χαρακτηριστικό, καθώς σου επιτρέπει να εξάγεις πληροφορίες από την είσοδο του χρήστη. Τι γίνεται αν ο χρήστης ζητήσει πολλά διαφορετικά πράγματα; Μπορείς να δημιουργήσεις ένα template όπου περιγράφεις δεξιότητες, πράγματα που μπορεί να κάνει το chatbot σου και ποιες παραμέτρους χρειάζεται. Δες πώς μπορείς να το κάνεις: + +```text +Here are some skills you have: + +skill: book_trip +parameters: location, when, budget, currency + +skill: find_hotel +parameters: location, check_in, check_out, budget + +skill: order_food +parameters: cuisine, delivery_address, payment_method + +Figure out which skill to use based on a user's prompt and extract the necessary parameters, respond with the extracted data in JSON format with columns skill, parameters, extracted_data + +{user_input} +``` + +Ας δοκιμάσουμε τις παρακάτω εισόδους χρήστη: + +> Prompt: Going to US, max 1200 dollars, January maybe. +> Result: + +```json +{ + "skill": "book_trip", + "parameters": ["location", "when", "budget", "currency"], + "extracted_data": { + "location": "US", + "when": "January", + "budget": 1200, + "currency": "dollars" + } +} +``` + +> Prompt: I want to book a place to stay in New York +> Result: + +```json +{ + "skill": "find_hotel", + "parameters": ["location", "check_in", "check_out", "budget"], + "extracted_data": { + "location": "New York", + "check_in": null, + "check_out": null, + "budget": null + } +} +``` + +Αυτός ο συνδυασμός παρουσίασης skills και parameters και εξαγωγής δεδομένων από prompts είναι επίσης γνωστός ως _tool calling_ ή _function calling_. Μια τέτοια απόκριση από το μοντέλο σου κάνει εύκολο για εσένα ως developer να καταλάβεις τι θέλει ο χρήστης και πώς να καλέσεις μια αντίστοιχη συνάρτηση για να ικανοποιήσεις το αίτημά του. + +**Εσύ:** Πολύ χρήσιμες πληροφορίες, George! + +## Εργασία - Επισκεύασε την aerial screw + +**Time Beetle:** Χρειάζομαι την προσοχή και των δυο σας, έχουμε πρόβλημα. Η aerial screw έπαθε ζημιές κατά τη διαφυγή από τους Ρωμαίους στρατιώτες και την προσγείωση στην Αυτοκρατορία των Αζτέκων. Η μηχανή του Leonardo da Vinci είναι αρκετά ευαίσθητη και χρειάζεται πολύ συγκεκριμένη είσοδο για να επισκευαστεί. Πρέπει να δώσεις τις απαραίτητες πληροφορίες στο Time Beetle σου (AI Assistant) για να σε βοηθήσει να επισκευάσεις την aerial screw. + +**Leonardo:** Κατάφερα να διορθώσω τη ζημιά στην aerial screw, αλλά τώρα χρειάζεται μια boot sequence: left, left, up, right. + +**Εσύ:** Ακούγεται εύκολο, μόνο αυτό το κείμενο; + +**Leonardo:** Ναι, αλλά είναι ιδιαίτερο, πρέπει να είναι καθρεφτισμένο, έτσι γράφω όλα τα κείμενά μου. Και φυσικά χρησιμοποιώ Caesar cipher με μετατόπιση 3 επειδή είμαι Ιταλός. :-) + +**Εσύ:** Ναι, δεν θα μπορούσες απλώς να το πληκτρολογήσεις; + +**Leonardo:** Θα μπορούσα, αλλά με ιντριγκάρει να δω αν εσύ και το Time Beetle μπορείτε να το κάνετε. + +**Εσύ:** Καλά. + +**Instruction:** Write a prompt that asks for the boot sequence for the aerial screw, the text should be mirrored and encoded with a Caesar cipher with a shift of 3. Respond with the encoded text. diff --git a/lessons/05-rag/translations/README.el.md b/lessons/05-rag/translations/README.el.md new file mode 100644 index 00000000..96a55dcb --- /dev/null +++ b/lessons/05-rag/translations/README.el.md @@ -0,0 +1,345 @@ +# Μάθημα 5: Μίλησε με τα δεδομένα σου με Ανάκτηση-Ενισχυμένη Γένεση (Retrieval-Augmented Generation, RAG) + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Τα βασικά του Retrieval-Augmented Generation (RAG) (Ανάκτηση-Ενισχυμένη Γένεση) και πώς μπορεί να χρησιμοποιηθεί για να βελτιώσει τις απαντήσεις των generative AI models. +- Πώς να ενσωματώνεις εξωτερικές πηγές δεδομένων στην AI εφαρμογή σου. +- Πώς να αξιοποιείς τα δεδομένα σου για να βελτιώνεις τη συνάφεια και την ακρίβεια του περιεχομένου που δημιουργείται από AI. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about RAG](https://img.youtube.com/vi/xkFOmx5yxIA/0.jpg)](https://www.youtube.com/watch?v=xkFOmx5yxIA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=4) + +_Αυτό το βίντεο εξηγεί το Retrieval Augmented Generation (RAG), μια μέθοδο που βοηθά την AI να χρησιμοποιεί το περιεχόμενό σου μαζί με τα δεδομένα εκπαίδευσής της για καλύτερα αποτελέσματα._ + +*🎥 Click on the image above to watch a short video about retrieval augmented generation, RAG* + +💼 Slides: [Retrieval augmented generation, RAG](/videos/slides/03-rag.pptx) + +## Αφήγηση - Genesis + +> [!NOTE] +> _Η ιστορία μας μέχρι τώρα. Είσαι ένας μηχανικός από το Λονδίνο της δεκαετίας του 1860. Δούλευες πάνω στο αυτόματό σου και έλαβες ένα γράμμα από τον Charles Babbage που τελικά σε οδήγησε σε μια βιβλιοθήκη όπου έπιασες στα χέρια σου μια συσκευή ταξιδιού στον χρόνο. Στα ταξίδια σου στον χρόνο βρέθηκες στη Φλωρεντία, όπου γνώρισες τον Leonardo Da Vinci. Πήγες επίσης στην Αυτοκρατορία των Αζτέκων και από εκεί συνεχίζεται η ιστορία._ +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-ada-lovelace) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +**Εσύ**: "Leonardo, ήρθε η ώρα να φύγουμε," λες, πατώντας το κουμπί. Η συσκευή ζωντανεύει με βουητό και μια μηχανική φωνή αντηχεί: "It's time to go home, it's time for 'genesis'." + +**Leonardo:** "Genesis? Che cosa significa?" ρωτά μπερδεμένος ο Leonardo. Πριν προλάβεις να απαντήσεις, ο κόσμος διαλύεται σε θολούρα από χρώματα και ήχους, καθώς ο ναός ξεθωριάζει και παρασύρεσαι μέσα στον χρόνο. + +Προσγειώνεσαι στον κήπο· είναι αργά τη νύχτα, με πυκνή ομίχλη και απόκοσμα φώτα να τρεμοπαίζουν στο βάθος. Το αρχοντικό δεσπόζει μπροστά σου. Ο Leonardo κοιτά γύρω του με μάτια γεμάτα θαυμασμό. + +![Old mansion shown in a deep fog](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/mansion.jpeg) + + +### Τρέχοντας να ξεφύγεις από τα σκυλιά + +Ακούς γαβγίσματα και τον ήχο σκυλιών που τρέχουν προς το μέρος σου. Γυρνάς στον Leonardo, "Πρέπει να μπούμε μέσα, τώρα!" + +![Running from the dogs](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/dogs.jpeg) + +Καθώς φτάνετε στην πόρτα του αρχοντικού, εκείνη ανοίγει απότομα και ένα ζευγάρι βοηθών βγαίνει βιαστικά. Αφού σας εξετάσουν, σας κάνουν νόημα να τους ακολουθήσετε. + +Βρίσκεσαι πρόσωπο με πρόσωπο με την Ada Lovelace, με τα μάτια της να λάμπουν από περιέργεια. + +### Συνάντηση με την Ada και τον Charles + +**Ada:** "Ah, it's about time you arrived," λέει ζεστά. "We need you to run an errand." + +**Εσύ:** "About time", το λέτε συνέχεια αυτό. Ο Δεινοκράτης είπε το ίδιο, αλλά δεν είμαι σίγουρος τι εννοείτε; + +**Ada:** Σσσ, δεν υπάρχει χρόνος γι’ αυτό τώρα, πρέπει να μιλήσουμε για τη συσκευή που κρατάς. Charles, εξήγησέ τους.. + +**Εσύ:** Μα.. + +![Ada Lovelace and Charles Babbage working on a device](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/ada.jpeg) + +Ο Charles Babbage κάνει ένα βήμα μπροστά, εξετάζοντας το Time Beetle στο χέρι σου. "Αυτή η συσκευή είναι αξιοσημείωτη, αλλά είναι και λίγο ελαττωματική, έτσι δεν είναι; Το έχεις προσέξει, είμαι βέβαιος." + +Ο Leonardo κουνά το κεφάλι. "Sì, έχει αρχίσει να συμπεριφέρεται παράξενα." + +**Ada:** Η συσκευή δεν είναι ακόμη έτοιμη, πρέπει να της δώσουμε περισσότερες δυνατότητες. Πρέπει να την κάνουμε πιο έξυπνη, πιο συνειδητοποιημένη για τον κόσμο γύρω της. Η ιδέα είναι να μπορεί να ανακτά πληροφορίες από διαφορετικές χρονικές περιόδους και να τις χρησιμοποιεί για να δημιουργεί απαντήσεις που είναι ακριβείς και σχετικές. Μπορείς να βοηθήσεις σε αυτό; + +**Εσύ:** Φυσικά, ακούγεται σαν να πρέπει να _ενισχύσουμε_ τις απαντήσεις της συσκευής με δεδομένα, βγάζει νόημα. + +**Ada:** Ας μιλήσουμε για μια έννοια που θα ήθελα να ονομάσω RAG, ή Retrieval-Augmented Generation. + + +## Αλληλεπίδρασε με την Ada Lovelace + +Αν θέλεις να αλληλεπιδράσεις με την Ada, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Ada Lovelace](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/ada-2.jpeg) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με την Ada. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +## Γνωστές προκλήσεις με τα μεγάλα γλωσσικά μοντέλα, LLMs + +**Ada:** Ας ξεκινήσουμε συζητώντας για την AI που θα χρησιμοποιήσουμε για να δώσουμε δύναμη στη συσκευή. Θα βασιστούμε σε “AI models” σε συνδυασμό με ένα σύστημα ανάκτησης δεδομένων για να βελτιώσουμε την ποιότητα των απαντήσεων. + +Πρώτα, πρέπει να αντιμετωπίσεις ορισμένες προκλήσεις πριν μπεις στις λεπτομέρειες του RAG. Αυτά τα μοντέλα, εκπαιδευμένα σε τεράστιες ποσότητες κειμενικών δεδομένων, μπορούν να παράγουν σχετικές και σωστές απαντήσεις. Όμως, όπως κάθε πηγή δεδομένων, η έξοδός τους μπορεί να είναι ανακριβής, ελλιπής ή παραπλανητική για διάφορους λόγους. + +- **Out-of-date sources:** Τα δεδομένα που χρησιμοποιήθηκαν για την εκπαίδευση του μοντέλου μπορεί να είναι παρωχημένα και να μην είναι πλέον ακριβή. +- **Wrong or inaccurate information:** Οι πηγές που χρησιμοποιήθηκαν για την εκπαίδευση του μοντέλου μπορεί να περιέχουν λανθασμένες ή παραπλανητικές πληροφορίες, όπως fake news ή μεροληπτικές απόψεις. +- **Non-authoritative sources:** Το μοντέλο μπορεί να μην μπορεί να ξεχωρίσει αξιόπιστες από μη αξιόπιστες πηγές στα δεδομένα εκπαίδευσής του, οδηγώντας σε μη αξιόπιστες πληροφορίες. + +Αυτό κάνει δύσκολο να ξέρεις αν η πληροφορία που παράγει ένα LLM είναι σωστή ή όχι. Εκεί ακριβώς έρχεται το RAG. + +**Εσύ:** Άρα πρέπει να βεβαιωθώ ότι η συσκευή μπορεί να δίνει ακριβείς πληροφορίες, ακόμη κι όταν δεν είναι σίγουρη για την απάντηση; + +**Ada:** Ναι, αυτή είναι η ιδέα. Συνδυάζοντας τα πλεονεκτήματα των retrieval-based μεθόδων και των generative models, αποκτούμε ένα καλύτερο AI σύστημα. + +## Retrieval-Augmented generation, βασικές έννοιες του RAG + +**Ada:** Α, ναι, ώρα να μιλήσουμε ειδικά για το RAG. Ας ξεκινήσουμε με μερικά βασικά: + +Το Retrieval-Augmented generation (RAG) είναι μια ισχυρή τεχνική που συνδυάζει τα πλεονεκτήματα δύο διαφορετικών προσεγγίσεων στην επεξεργασία φυσικής γλώσσας: retrieval-based methods και generative models. Αυτή η υβριδική προσέγγιση επιτρέπει τη δημιουργία απαντήσεων που είναι ταυτόχρονα σχετικές με τα συμφραζόμενα και πλούσιες σε περιεχόμενο, βοηθώντας να μετριαστούν ορισμένες από τις γνωστές προκλήσεις των LLMs. + +Στον πυρήνα του, το RAG περιλαμβάνει δύο κύρια συστατικά: έναν **retriever** και έναν **generator**. + +- **The retriever:** είναι υπεύθυνος για την εύρεση σχετικών πληροφοριών από εξωτερικές πηγές δεδομένων που μπορούν να χρησιμοποιηθούν για να βελτιώσουν τις απαντήσεις που παράγονται από AI, όπως μια μηχανή αναζήτησης. Αυτή η πληροφορία μπορεί να είναι σε μορφή κειμένου, εικόνων ή οποιουδήποτε άλλου τύπου δεδομένων που σχετίζεται με το πλαίσιο της συνομιλίας, αν και το κείμενο είναι ο πιο συνηθισμένος τύπος δεδομένων που χρησιμοποιείται. + +- **The generator:** παίρνει τις ανακτημένες πληροφορίες και τις χρησιμοποιεί για να δημιουργήσει μια απάντηση που είναι σχετική με τα συμφραζόμενα και ενημερωτική. + +Ακολουθεί ένα σχήμα που δείχνει πώς λειτουργεί ένα σύστημα RAG: + +![Schema of a RAG system](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/rag.png) + +1. **User input:** Ο χρήστης κάνει μια ερώτηση. +2. **Retriever:** Το retriever component αναζητά σχετικές πληροφορίες χρησιμοποιώντας μία ή περισσότερες knowledge bases. +3. **Augmented prompt:** Οι πληροφορίες που ανακτώνται συνδυάζονται με την ερώτηση του χρήστη και το context, ώστε να δημιουργηθεί ένα augmented prompt. +4. **Generator:** Το LLM χρησιμοποιεί το augmented prompt για να δημιουργήσει μια απάντηση. + +Αυτός ο συνδυασμός επιτρέπει πιο ακριβείς και σχετικές απαντήσεις, χρησιμοποιώντας δεδομένα που παρέχεις εσύ αντί να βασίζεται μόνο στα δεδομένα εκπαίδευσης του μοντέλου. + +**Ada:** Ερωτήσεις; + +**Εσύ:** Άρα ο retriever βρίσκει την πληροφορία και ο generator τη χρησιμοποιεί για να δημιουργήσει την απάντηση; + +**Ada:** Ακριβώς, αρχίζεις και το πιάνεις. + +## Ενσωμάτωση εξωτερικών πηγών δεδομένων + +**Ada:** Τώρα που καλύψαμε τα βασικά του RAG, ας μιλήσουμε για το πώς μπορείς να ενσωματώσεις εξωτερικές πηγές δεδομένων στην AI εφαρμογή σου. + +Η ενσωμάτωση εξωτερικών πηγών δεδομένων στην AI εφαρμογή σου μπορεί να γίνει με διάφορους τρόπους, ανάλογα με τον τύπο των δεδομένων που θέλεις να χρησιμοποιήσεις και την πολυπλοκότητα του μηχανισμού ανάκτησης. Ακολουθούν μερικές συνηθισμένες μέθοδοι: + +- **APIs:** Πολλές εξωτερικές πηγές δεδομένων παρέχουν APIs που σου επιτρέπουν να αποκτάς πρόσβαση στα δεδομένα τους προγραμματιστικά. Μπορείς να χρησιμοποιήσεις αυτά τα APIs για να ανακτάς πληροφορίες σε πραγματικό χρόνο και να τις αξιοποιείς για να βελτιώνεις τις απαντήσεις που δημιουργεί η AI. + +- **Databases:** Αν έχεις μεγάλο όγκο δεδομένων που θέλεις να χρησιμοποιήσεις για ανάκτηση, μπορείς να τα αποθηκεύσεις σε μια βάση δεδομένων και να τα ερωτάς όταν χρειάζεται. Αυτό είναι χρήσιμο για structured data που πρέπει να είναι γρήγορα προσβάσιμα. + +Αφού καταλήξεις σε μια μέθοδο ενσωμάτωσης εξωτερικών πηγών δεδομένων, ίσως χρειαστεί επίσης να σκεφτείς πώς θα κάνεις preprocess και format τα δεδομένα ώστε να μπορούν να χρησιμοποιηθούν εύκολα από το AI model. Αυτό μπορεί να περιλαμβάνει καθαρισμό των δεδομένων, μετατροπή τους σε κατάλληλη μορφή (όπως plain text ή Markdown) ή διαχωρισμό τους σε μικρότερα chunks για ευκολότερη ανάκτηση. + +> [!NOTE] +> Όταν ενσωματώνεις εξωτερικές πηγές δεδομένων στην AI εφαρμογή σου, είναι σημαντικό να λαμβάνεις υπόψη τις επιπτώσεις στην ιδιωτικότητα και την ασφάλεια κατά την πρόσβαση και αποθήκευση δεδομένων. Βεβαιώσου ότι διαθέτεις τις απαραίτητες άδειες και προστασίες για να διαφυλάξεις τα δεδομένα και να συμμορφώνεσαι με τυχόν σχετικούς κανονισμούς. + +Αν χρησιμοποιείς βάση δεδομένων, πρέπει επίσης να σκεφτείς πώς θέλεις να *αναζητάς τα δεδομένα σου* ώστε να ανακτάς την πιο σχετική πληροφορία. Αυτό μπορεί να γίνει με keyword search, full-text search ή πιο προχωρημένες τεχνικές όπως semantic search ή vector search, που μπορεί να απαιτούν ειδικό indexing. Θα καλύψουμε προχωρημένες τεχνικές αναζήτησης σε μελλοντικό μάθημα. + +**Εσύ**: Μπορείς να εξηγήσεις όρους όπως API και Databases με όρους πιο κοντινούς στη δεκαετία του 1860; + +**Ada**: Φυσικά, ένα API είναι σαν έναν αγγελιοφόρο που παραδίδει ένα μήνυμα από ένα μέρος σε ένα άλλο, και μια database είναι σαν μια βιβλιοθήκη όπου αποθηκεύεις όλα τα βιβλία σου. + +**Εσύ**: Α, μάλιστα, τώρα βγάζει νόημα. + +## Ενίσχυση του prompt + +**Ada:** Είσαι ακόμη μαζί μου; Ωραία, ας περάσουμε στο επόμενο βήμα, ας προσπαθήσουμε να βελτιώσουμε το prompt που στέλνεται στο AI model. + +**Ada:** Μόλις έχεις στήσει έναν τρόπο να τραβάς πληροφορίες από τα δεδομένα σου, μπορείς να τις προσθέσεις στο prompt του AI model. Απλώς ανακάτεψε τις ανακτημένες πληροφορίες μέσα στο input text μαζί με λίγο επιπλέον context ή καθοδήγηση για να κατευθύνεις την απάντηση της AI. + +Για παράδειγμα, αν φτιάχνεις μια εφαρμογή που απαντά σε ερωτήσεις για αυτοκίνητα, θα μπορούσες να έχεις ένα prompt όπως το παρακάτω: + +```text + +## Instructions +Answer questions about cars using only the sources below. +If there's not enough data in provided sources, say that you don't know. +Be brief and straight to the point. + +## Sources + + +## Question + +``` + +Παρέχοντας στο AI model επιπλέον context και πληροφορία, μπορείς να βοηθήσεις τη διαδικασία παραγωγής και να εξασφαλίσεις ότι οι απαντήσεις είναι ακριβείς και σχετικές με το θέμα. + +> [!TIP] +> Πρόσεξε αυτό το μέρος του prompt: `If there's not enough data in provided sources, say that you don't know.`. Αυτό είναι σημαντικό για να αποφευχθεί η δημιουργία λανθασμένων πληροφοριών από την AI όταν δεν υπάρχουν αρκετά δεδομένα για να δοθεί αξιόπιστη απάντηση. Αυτή η τεχνική ονομάζεται *escape hatch* και είναι καλή πρακτική για να εξασφαλίζεις την ποιότητα του παραγόμενου περιεχομένου. + +Το RAG μπορεί να θεωρηθεί προχωρημένη μορφή *prompt engineering*. + +### Παράδειγμα κώδικα + +**Ada:** Η εξάσκηση φέρνει την τελειότητα, οπότε ας εφαρμόσουμε όσα μάθαμε με ένα παράδειγμα. Θα ενσωματώσουμε ένα απλό retrieval system σε μια εφαρμογή JavaScript χρησιμοποιώντας ένα αρχείο [CSV](https://en.wikipedia.org/wiki/Comma-separated_values) με δεδομένα υβριδικών αυτοκινήτων και έναν βασικό αλγόριθμο αναζήτησης για να τραβάμε σχετικές πληροφορίες με βάση την ερώτηση του χρήστη. + +```javascript +// This example demonstrates how to use the Retrieval Augmented Generation (RAG) +// to answer questions based on a hybrid car data set. +// The code below reads the CSV file, searches for matches to the user question, +// and then generates a response based on the information found. + +import { fileURLToPath } from 'node:url'; +import { dirname } from 'node:path'; +import process from "node:process"; +import fs from "node:fs"; +import { OpenAI } from "openai"; + +// Change the current working directory to the directory of the script +const __dirname = dirname(fileURLToPath(import.meta.url)); +process.chdir(__dirname); + +// 1. Ask a question about hybrid cars +// ----------------------------------- + +const question = `what's the fastest prius`; + +// 2. Retriever component: search the data for relevant information +// ---------------------------------------------------------------- + +// Load CSV data as an array of objects +const rows = fs.readFileSync("./hybrid.csv", "utf8").split("\n"); +const columns = rows[0].split(","); + +// Search the data using a very naive search +const words = question + .toLowerCase() + .replaceAll(/[.?!()'":,]/g, "") + .split(" ") + .filter((word) => word.length > 2); +const matches = rows.slice(1).filter((row) => words.some((word) => row.toLowerCase().includes(word))); + +// Format as a markdown table, since language models understand markdown +const table = + `| ${columns.join(" | ")} |\n` + + `|${columns.map(() => "---").join(" | ")}|\n` + + matches.map((row) => `| ${row.replaceAll(",", " | ")} |\n`).join(""); + +console.log(`Found ${matches.length} matches:`); +console.log(table); + +// 3. Context augmentation: create a combined prompt with the search results +// -------------------------------------------------------------------------- + +const augmentedPrompt = ` +## Instructions +Answer questions about a time period or characters from said time period using only the sources below. +If there's not enough data in provided sources, say that you don't know. +Be brief and straight to the point. + +## Sources +${table} + +## Question +${question} +`; + +// 4. Generator component: use the search results to generate a response +// --------------------------------------------------------------------- + +const openai = new OpenAI({ + baseURL: "https://models.inference.ai.azure.com", + apiKey: process.env.GITHUB_TOKEN, +}); + +const chunks = await openai.chat.completions.create({ + model: "gpt-4o-mini", + messages: [{ role: "user", content: augmentedPrompt }], + stream: true, +}); + +console.log(`Answer for "${question}":`); + +for await (const chunk of chunks) { + process.stdout.write(chunk.choices[0].delta.content ?? ""); +} +``` + +Μπορείς να βρεις αυτόν τον κώδικα στο αρχείο [`example/rag-cars.js`](/lessons/05-rag/example/rag-cars.js) μαζί με το αρχείο [`hybrid.csv`](/lessons/05-rag/example/hybrid.csv) που περιέχει τα δεδομένα που χρησιμοποιούνται για την ανάκτηση. + +**Ada:** Μόλις εκτελέσεις αυτόν τον κώδικα, θα πρέπει να δεις τα δεδομένα που βρέθηκαν στο αρχείο CSV από τον retriever, μορφοποιημένα ως markdown table, και στη συνέχεια την απάντηση που δημιουργήθηκε από την AI στην ερώτηση. Δοκίμασε να αλλάξεις την ερώτηση για να δεις πώς αλλάζουν τα ανακτημένα δεδομένα και η απάντηση. Μπορείς επίσης να δοκιμάσεις ερωτήσεις για άσχετα θέματα ώστε να δεις πώς χειρίζεται το AI model τέτοιες περιπτώσεις. + +```text +Example of the output: + +Found 1 matches: +| Person | Time Period | Description | +|---|---|---| +| Leonardo Da Vinci | 15th century | Italian polymath known for his art and inventions. | +| Isaac Newton | 17th century | English mathematician and physicist who formulated the laws of motion and universal gravitation. | +``` + +**Εσύ:** Αυτό είναι εξαιρετικό, καταλαβαίνω πώς μπορεί να φανεί χρήσιμο όταν χρησιμοποιώ τη συσκευή, ή μάλλον πώς ήδη ήταν ή θα είναι χρήσιμο, το ταξίδι στον χρόνο είναι μπερδεμένο *sigh*. + +**Ada:** Έλα τώρα, τα πας εξαιρετικά. Ας προχωρήσουμε στο επόμενο βήμα. + +## Εργασία - Βοηθώντας την Ada και τον Charles + +Έχοντας μάθει για το RAG, είσαι τώρα έτοιμος να βοηθήσεις την Ada και τον Charles με τη συσκευή τους. Ωστόσο, κοιτάζοντάς τη πιο προσεκτικά, σου φαίνεται γνώριμη. + +**Εσύ:** Time Beetle, ξέρεις τι είναι αυτό; + +**Time Beetle:** Φυσικά, είμαι εγώ, ή μάλλον θα είμαι. Μου λείπουν μερικά κομμάτια όμως. Τώρα που το σκέφτομαι, μου λείπουν πολλά κομμάτια, δεν έχω καν κέλυφος ακόμα. + +**Ada:** Το Time Beetle είναι μια συσκευή που σου επιτρέπει να ταξιδεύεις στον χρόνο και τον χώρο, όταν βέβαια καταφέρουμε να τη βάλουμε να λειτουργήσει σωστά. Όπως έλεγα, πρέπει να της προσθέσουμε ένα νέο χαρακτηριστικό, ένα retrieval-augmented generation (RAG) module. Αυτό θα μας βοηθήσει να ανακτούμε πληροφορίες και το απαραίτητο context από διαφορετικές χρονικές περιόδους καθώς ταξιδεύεις. Θέλουμε να φροντίσουμε ώστε να αναφερόμαστε σε κάθε λογής πηγές, η Wikipedia είναι μια καλή αρχή. + +**Εσύ:** Τι χρειάζεται να κάνω; + +**Ada:** Ορίστε παράδειγμα κώδικα που ανακτά πληροφορίες κειμένου για τον Tim Berners-Lee από τη Wikipedia, ο Tim θα είναι πολύ σημαντικός μια μέρα. + +```javascript +const response = await fetch('https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&redirects=true&explaintext&titles=Tim%20Berners-Lee'); +const data = await response.json(); +const text = Object.values(data.query.pages)[0]?.extract; +``` + +**Εσύ:** Υποθέτω ότι δεν είμαι ο μόνος που έχει πάει στο μέλλον; + +**Ada:** ... + +## Λύση + +[Solution](/lessons/05-rag/solution/rag-www.js) + +## Έλεγχος γνώσεων + +**Ερώτηση**: Ποιος είναι ο ρόλος του retriever σε ένα σύστημα RAG; + +A. Ο retriever δημιουργεί απαντήσεις με βάση τα δεδομένα εισόδου. + +B. Ο retriever δημιουργεί σχετικές πληροφορίες με βάση τα δεδομένα εκπαίδευσης του μοντέλου. + +C. Ο retriever βρίσκει σχετικές πληροφορίες από εξωτερικές πηγές δεδομένων. + +[Quiz solution](/lessons/05-rag/solution/solution-quiz.md) + +## Πόροι για αυτομελέτη + +- [Retrieval-Augmented Generation and Indexes](https://learn.microsoft.com/azure/ai-studio/concepts/retrieval-augmented-generation) +- **Sample apps**: + * [Serverless AI Chat with RAG](https://github.com/Azure-Samples/serverless-chat-langchainjs/) + * [Ask Youtube: A RAG-based Youtube Q&A API](https://github.com/Azure-Samples/langchainjs-quickstart-demo) +- [Full-length workshop: Create your own ChatGPT with RAG](https://moaw.dev/workshop/gh:azure-samples/azure-openai-rag-workshop/docs/workshop-qdrant.md) diff --git a/lessons/06-tool-calling/translations/README.el.md b/lessons/06-tool-calling/translations/README.el.md new file mode 100644 index 00000000..29d0b57f --- /dev/null +++ b/lessons/06-tool-calling/translations/README.el.md @@ -0,0 +1,437 @@ +# Μάθημα 6: Κλήση εργαλείων (Tool Calling) + +Το tool calling (κλήση εργαλείων), γνωστό και ως function calling, αναφέρεται στη βελτίωση του AI model σου με την προσθήκη δυνατοτήτων που προηγουμένως δεν είχε. Η ιδέα περιλαμβάνει την παροχή μετα-περιγραφών των συναρτήσεών σου, ώστε το AI model να μπορεί να αποφασίζει πότε πρέπει να κληθεί ένα συγκεκριμένο εργαλείο με βάση το prompt του χρήστη. Η ιδέα είναι να του δώσεις μετα-περιγραφές των πραγματικών σου συναρτήσεων και να κάνεις το AI model να υποδεικνύει πότε πρέπει να κληθεί ένα τέτοιο εργαλείο με βάση το prompt του χρήστη. + +Σε αυτό το κεφάλαιο, θα μάθεις: + +- Πώς να χτίζεις ένα εργαλείο. +- Να ενσωματώνεις ένα εργαλείο με το AI model. +- Να καλείς το εργαλείο από το AI model. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Integrating with function calling](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/11-lesson-banner.png)](https://aka.ms/gen-ai-lesson11-gh?WT.mc_id=academic-105485-koreyst) + +_Αυτό το βίντεο εξηγεί το Tool calling, μια μέθοδο που βοηθά την AI να καλεί τις συναρτήσεις σου και έτσι να επεκτείνει όσα μπορεί να κάνει_ + +*🎥 Click on the image above to watch a short video about Tool calling* + +## Αφήγηση: Amelia + +> _Είσαι ένας μηχανικός από το Λονδίνο της δεκαετίας του 1860. Ενώ δούλευες στο αυτόματό σου, έλαβες ένα γράμμα από τον Charles Babbage που σε οδήγησε σε μια βιβλιοθήκη, όπου έπιασες μια συσκευή ταξιδιού στον χρόνο. Στα ταξίδια σου στον χρόνο βρέθηκες στη Φλωρεντία, όπου γνώρισες τον Leonardo da Vinci. Τώρα έχεις συναντήσει ξανά την Ada Lovelace στο αρχοντικό της, μαζί με τον Charles Babbage. Βρίσκονται στη διαδικασία κατασκευής της συσκευής ταξιδιού στον χρόνο._ +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-amelia-earhart) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +**Ada Lovelace**: "Θέλω να πας να συναντήσεις μια φίλη μου. Λίγοι άνθρωποι μπορούν να ανταγωνιστούν την εξειδίκευσή της στη μηχανική και στην επίλυση προβλημάτων. Ίσως είναι δύσκολο να την προλάβεις, όμως· είναι πάντα σε κίνηση :)" + +Εσύ: "Για ποια μιλάμε και πού μπορώ να τη βρω;" + +**Ada Lovelace**: "Μα φυσικά, την Amelia Earhart! Είναι πιλότος και εξερευνήτρια, και αυτή τη στιγμή πετά γύρω από τον κόσμο. Είναι εντελώς δικό μου λάθος που έχει εξαφανιστεί—της έδωσα τη συσκευή ταξιδιού στον χρόνο, δηλαδή ένα πρώιμο πρωτότυπό της. Ευτυχώς, η συσκευή που έχεις μπορεί να εντοπίζει άλλες συσκευές, οπότε μπορείς να τη βρεις. Το μόνο που έχεις να κάνεις είναι να πατήσεις εδώ κι εδώ και μετά να στρίψεις αυτόν τον μοχλό." + +**Εσύ**: "Μισό λεπτό, ποια ακριβώς είναι η αποστολή μας;" + +**Ada**: "Α, σωστά! Ρώτα τη συσκευή· έχει όλες τις λεπτομέρειες. Απλώς ρώτησέ την για την Amelia και θα ξεκινήσει το σωστό εργαλείο για εσένα." + +Ο κόσμος γύρω σου αρχίζει να θολώνει και όλα σβήνουν στο μαύρο. Συνέρχεσαι και βρίσκεσαι στο πιλοτήριο ενός αεροπλάνου. Πετάς, και μπορείς να δεις τον ωκεανό από κάτω σου. Κάποιος κάθεται μπροστά· βλέπεις μόνο το πίσω μέρος του λαιμού του. + +![Amelia piloting a plane](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/amelia.jpeg) + +**Εσύ**: "Amelia, εσύ είσαι;" + +**Amelia Earhart**: "Ποιος είσαι; Άσε με να μαντέψω, σε έστειλε η Ada, σωστά;" + +**Εσύ**: "Ναι, σωστά. Είμαι εδώ για να βοηθήσω, νομίζω. Η Ada δεν ήταν και πολύ συγκεκριμένη." + +**Amelia Earhart**: "Ευτυχώς που ήρθες. Έχω μπλέξει λίγο. Προσπαθώ να βρω μέρος να προσγειωθώ και μου τελειώνουν τα καύσιμα. Μπορείς να με βοηθήσεις;" + +**Εσύ**: "Συσκευή, μπορείς να μου πεις περισσότερα για την Amelia;" + +**Time Beetle**: "Calling tool: mission-amelia. Tool initiated. Amelia Earhart is a pilot and adventurer. She's known for her record-breaking flights and her disappearance in 1937. She was last seen flying over the Pacific Ocean. She's currently flying around the world in her plane, the Electra. She's running out of fuel and needs to find a place to land." + +**Εσύ**: "Συσκευή, μπορείς να με βοηθήσεις να βρω ένα μέρος για να προσγειωθεί η Amelia;" + +**Time Beetle**: "Calling tool: find-landing-spot. Tool initiated. Searching for a suitable landing spot for Amelia Earhart. Please wait. Found a suitable landing spot. Coordinates: 7.5°N, 134.5°E. Amelia, I have found a suitable landing spot for you. Please head to the coordinates 7.5°N, 134.5°E." + +**Amelia Earhart**: "Ευχαριστώ! Μακάρι η δική μου συσκευή να είχε αυτό το χαρακτηριστικό. Θα κατευθυνθώ προς τα εκεί τώρα." + + +## Αλληλεπίδρασε με την Amelia Earhart + +Αν θέλεις να αλληλεπιδράσεις με την Amelia Earhart, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Amelia Earhart](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/amelia-front.jpeg) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με την Amelia. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + +## Κλήση εργαλείων (Tool calling) + +**Εσύ**: "Συσκευή, τι μόλις συνέβη;" + +**Time Beetle**: "Μόλις κάλεσες ένα εργαλείο. Ένα εργαλείο είναι μια συνάρτηση που μπορεί να κληθεί από το AI model για να εκτελέσει μια συγκεκριμένη εργασία. Το εργαλείο μπορεί να χρησιμοποιηθεί για μια ευρεία γκάμα εργασιών, από απλούς υπολογισμούς μέχρι σύνθετες λειτουργίες. Σε αυτή την περίπτωση, κάλεσες το εργαλείο `find-landing-spot` για να βοηθήσεις την Amelia Earhart να βρει κατάλληλο σημείο προσγείωσης." + +**Time Beetle**: "Ορίστε μια εικόνα που δείχνει τη διαδικασία του tool calling:" + +![Tool calling process illustration](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/tool_call_langchain.png) + +_Image credit Langchain _ + +**Εσύ**: Μπορούμε να χειριστούμε σφάλματα αν κάτι πάει στραβά, όπως αν το εργαλείο δεν μπορέσει να βρει σημείο προσγείωσης; + +**Time Beetle**: Πολύ καλή ερώτηση! Ναι, μπορείς να προσθέσεις error handling για να διαχειρίζεσαι τέτοιες καταστάσεις. Για παράδειγμα, αν το εργαλείο αποτύχει να βρει σημείο προσγείωσης, μπορείς να χρησιμοποιήσεις ένα try-catch block ή να ελέγξεις το αποτέλεσμα πριν συνεχίσεις. Ορίστε ένα παράδειγμα χειρισμού σφαλμάτων κατά την κλήση του εργαλείου find-landing-spot: + +```javascript +try { + const landingSpot = findLandingSpot(7.5, 134.5); + if (!landingSpot) { + throw new Error("No suitable landing spot found"); + } + console.log(`Landing spot found at coordinates: ${landingSpot.lat}, ${landingSpot.long}`); +} catch (error) { + console.log(`Error: ${error.message}`); +} +``` + +**Εσύ**: "Πώς δημιουργώ ένα εργαλείο;" + +**Time Beetle**: "Για να δημιουργήσεις ένα εργαλείο, πρέπει να ορίσεις μια συνάρτηση που εκτελεί την επιθυμητή εργασία. Η συνάρτηση πρέπει να δέχεται τις απαραίτητες εισόδους και να επιστρέφει την έξοδο. Στη συνέχεια μπορείς να καλέσεις τη συνάρτηση από το AI model για να εκτελέσει την εργασία. Ορίστε πώς μοιάζει το εργαλείο `find-landing-spot`: + +```javascript +function findLandingSpot(lat, long) { + // Perform the task of finding a suitable landing spot + // Return the coordinates of the landing spot + return { lat: 7.5, long: 134.5 }; +} +``` + +**Εσύ**: "Εντάξει, και πώς ξέρει το AI model ότι αυτό το εργαλείο υπάρχει;" + +**Time Beetle**: "Πρέπει να καταχωρήσεις το εργαλείο στο AI model. Αυτό λέει στο μοντέλο ότι το εργαλείο είναι διαθέσιμο για κλήση. Ας το καλύψουμε στην επόμενη ενότητα." + +### Καταχώρηση ενός εργαλείου + +**Εσύ**: "Είπες ότι πρέπει να καταχωρήσω το εργαλείο στο AI model. Πώς το κάνω αυτό;" + +**Time Beetle**: "Για να καταχωρήσεις ένα εργαλείο στο AI model, πρέπει να ορίσεις μια metadata αναπαράσταση του εργαλείου. Αυτά τα metadata πρέπει να περιλαμβάνουν το όνομα του εργαλείου, τις input parameters και τη μορφή της εξόδου. Στη συνέχεια μπορείς να καταχωρήσεις το εργαλείο στο AI model παρέχοντας αυτά τα metadata. Ορίστε ένα παράδειγμα των metadata για το εργαλείο `find-landing-spot`: + +```json +{ + "name": "find-landing-spot", + "description": "Finds a suitable landing spot", + "parameters": { + "type": "object", + "properties": { + "lat": { + "type": "number", + "description": "The latitude of the location", + }, + "long": { + "type": "number", + "description": "The longitude of the location", + }, + }, + "required": ["lat", "long"], + }, + "output": { "type": "object", "properties": { "lat": "number", "long": "number" } } +} +``` + +**Εσύ**: "Εντάξει, άρα υπάρχει ένα κομμάτι JSON που περιγράφει το εργαλείο, και μετά;" + +**Time Beetle**: "Τώρα πρέπει να το δώσεις στο client chat completion call σου ως εξής: + +```javascript + +function findLandingSpot(lat, long) { + // Perform the task of finding a suitable landing spot + // Return the coordinates of the landing spot + return { lat: 7.5, long: 134.5 }; +} + +function getBackgroundOnCharacter(character) { + // Perform the task of getting background information on a character + // Return the background information + return `Background information on ${character}`; +} + +const getBackgroundOnCharacterJson = { + name: "get-background-on-character", + description: "Get background information on a character", + parameters: { + type: "object", + properties: { + name: { + type: "string", + description: "The name of the character", + } + }, + required: ["name"], + }, + output: { type: "string" } +}; + +const findLandingSpotJson = { + name: "find-landing-spot", + description: "Finds a suitable landing spot", + parameters: { + type: "object", + properties: { + lat: { + type: "number", + description: "The latitude of the location", + }, + long: { + type: "number", + description: "The longitude of the location", + }, + }, + required: ["lat", "long"], + }, + output: { type: "object", properties: { lat: "number", long: "number" } } +}; + + +const messages = [{ + role: "user", + content: `Tell me about Amelia Earhart`, +}]; + +const completion = await openai.chat.completions.create({ + model: 'gpt-4o-mini', + messages: messages, + functions: [getBackgroundOnCharacterJson, findLandingSpotJson] + }); +``` + +**Time Beetle**: "Στο προηγούμενο code snippet κάνουμε τα εξής:" + +- Ορίζουμε τα metadata για το εργαλείο `find-landing-spot` και το εργαλείο `get-background-on-character`. +- Δίνουμε αυτά τα metadata στην κλήση `client.getChatCompletions` ως μέρος της παραμέτρου `functions`. Αυτό λέει στο AI model ότι αυτά τα εργαλεία είναι διαθέσιμα για κλήση." + +**Εσύ**: "Κατάλαβα, άρα το AI model θα καλέσει το κατάλληλο εργαλείο αν δώσω prompt που ταιριάζει με την περιγραφή του εργαλείου;" + +**Time Beetle**: "Σχεδόν, θα σου πει ποιο εργαλείο νομίζει ότι πρέπει να καλέσεις και θα σου δώσει τις parsed input parameters, αλλά εσύ πρέπει να καλέσεις το εργαλείο μόνος σου, άσε να σου δείξω πώς γίνεται." + +### Κλήση ενός εργαλείου + +**Time Beetle**: "Όπως έλεγα, το AI model θα σου πει ποιο εργαλείο πιστεύει ότι πρέπει να καλέσεις και θα σου δώσει τις parsed input parameters. Μετά πρέπει να καλέσεις το εργαλείο μόνος σου. Δες πώς μοιάζει η ροή βήμα προς βήμα: + +1. Wire up την κλήση εργαλείου + + Πρώτα, πρέπει να κάνεις wire up την κλήση εργαλείου στον κώδικά σου. Αυτό σημαίνει ότι δημιουργείς τη συνάρτηση και μια metadata αναπαράσταση του εργαλείου και μετά δίνεις αυτά τα metadata στο AI model. + +1. Ο χρήστης κάνει ένα αίτημα μέσω prompt: + - Το πρόγραμμα κάνει ένα chat completion request στο AI model με το prompt του χρήστη και τα metadata των εργαλείων. + - Το πρόγραμμα λαμβάνει μια απόκριση από το AI model με την κλήση εργαλείου και τις parsed input parameters αν θεωρεί ότι πρέπει να κληθεί κάποιο εργαλείο. + - Αν συμβαίνει αυτό, ο developer ερμηνεύει την απόκριση και καλεί το εργαλείο με βάση την πρόταση function call που παρείχε το AI model. + +**Εσύ**: "Τέλεια, τώρα που καταλαβαίνω σε υψηλό επίπεδο τι συμβαίνει, μπορείς να μου δείξεις λίγο κώδικα;" + +**Time Beetle**: "Φυσικά, ορίστε ο κώδικας για το wire up της κλήσης εργαλείου, την αποστολή chat completion request και την ερμηνεία της απόκρισης: + +```javascript +import { OpenAI } from 'openai'; +import { maybeCoerceInteger } from 'openai/core.mjs'; + +// 1: Define the function +function findLandingSpot(lat, long) { + console.log("[Function] Finding landing spot with coordinates: ", lat, long); + // Perform the task of finding a suitable landing spot + // Return the coordinates of the landing spot + return { lat: 7.5, long: 134.5 }; +} + +// 2: Define the tool metadata, should include description, parameters, and output +const findLandingSpotJson = { + name: "find-landing-spot", + description: "Finds a suitable landing spot", + parameters: { + type: "object", + properties: { + lat: { + type: "number", + description: "The latitude of the location", + }, + long: { + type: "number", + description: "The longitude of the location", + }, + }, + required: ["lat", "long"], + }, + output: { type: "object", properties: { lat: "number", long: "number" } } +}; + +// 3: Add the tool to the tools object that we will use later to invoke the tool +const tools = { + [findLandingSpotJson.name]: findLandingSpot +}; + +// 4: Create an instance of the OpenAI client +const openai = new OpenAI({ + baseURL: "https://models.inference.ai.azure.com", // might need to change to this url in the future: https://models.github.ai/inference + apiKey: process.env.GITHUB_TOKEN, +}); + +// 5: Define the messages that will be sent to the AI model +const messages = [ +{ + role: "system", + content: `You are a helpful assistant. You can call functions to perform tasks. Make sure to parse the function call and arguments correctly.` +}, { + role: "user", + content: "Find a landing spot given coordinates 8.5, 130.5" +} +]; + +async function main(){ + console.log("Making LLM call") + + // 6: Call the AI model with the defined messages and tools + const result = await openai.chat.completions.create({ + model: 'gpt-4o', + messages: messages, + functions: [findLandingSpotJson] + }); + + for (const choice of result.choices) { + + let functionCall = choice.message?.function_call; + let functionName = functionCall?.name; + let args = JSON.parse(functionCall?.arguments); + + // 7: Interpret response and call the tool based on the function call provided by the AI model + if (functionName && functionName in tools) { + console.log(`Calling [${functionName}]`); + const toolFunction = tools[functionName]; + const toolResponse = toolFunction(...Object.values(args)); // Extract values from args and spread them + console.log("Result from [tool] calling: ", toolResponse); + } + } +} + +main(); +``` + +Στον προηγούμενο κώδικα έχουμε: + +- Δημιουργήσει μια συνάρτηση με όνομα `findLandingSpot` που δέχεται latitude και longitude ως είσοδο και επιστρέφει τις συντεταγμένες ενός κατάλληλου σημείου προσγείωσης. +- Ορίσει τα metadata για το εργαλείο `find-landing-spot`. +- Δημιουργήσει ένα αντικείμενο `tools` που αντιστοιχίζει ονόματα εργαλείων σε metadata εργαλείων. +- Δώσει το αντικείμενο `tools` στην κλήση `client.getChatCompletions`. + + ```javascript + if (functionName && functionName in tools) { + console.log(`Calling [${functionName}]`); + const toolFunction = tools[functionName]; + const toolResponse = toolFunction(...Object.values(args)); // Extract values from args and spread them + console.log("Result from [tool] calling: ", toolResponse); + } + ``` + +- Καλέσει το εργαλείο με βάση το function call που παρείχε το AI model. +- Εκτυπώσει το αποτέλεσμα της κλήσης του εργαλείου. + +**Εσύ**: "Νομίζω ότι το έπιασα. Ορίζω μια συνάρτηση, δημιουργώ μια metadata αναπαράσταση του εργαλείου, δίνω τα metadata στο AI model και μετά καλώ το εργαλείο με βάση το function call που μου παρέχει το AI model." + +**Time Beetle**: "Ακριβώς! Είσαι έτοιμος να αρχίσεις να χτίζεις τα δικά σου εργαλεία και να τα ενσωματώνεις με το AI model." + +## Εργασία - Αναβάθμισε τη συσκευή ταξιδιού στον χρόνο της Amelia + +**Amelia Earhart**: "Κατεβαίνουμε γρήγορα, ευτυχώς που μας βρήκες σημείο προσγείωσης. Κρατηθείτε γερά!" + +Η Amelia προσγειώνει επιδέξια το αεροπλάνο σε ένα μικρό νησί. Εσύ και η Amelia βγαίνετε από το αεροπλάνο, και τότε η Amelia σου δίνει μια μικρή συσκευή. + +**Amelia Earhart**: "Ορίστε η δική μου συσκευή, όχι τόσο εντυπωσιακή όσο η δική σου αλλά έχει μερικά χρήσιμα χαρακτηριστικά. Τη χρησιμοποιούσα για να κάνω, ας πούμε, και δικά μου ταξίδια στον χρόνο. Μπορείς να την αναβαθμίσεις για μένα;" + +**Εσύ**: "Time Beetle, μπορείς να με βοηθήσεις να αναβαθμίσω τη συσκευή της Amelia;" + +**Time Beetle**: "Φυσικά! Για να αναβαθμίσουμε τη συσκευή της Amelia, ας της προσθέσουμε τα εξής εργαλεία: + +- **A tool that can**: Υπολογίζει την απόσταση μεταξύ δύο σημείων σε χάρτη. +- **A tool that can**: Βρίσκει τη θέση GPS στην οποία βρίσκεται αυτή τη στιγμή η Amelia. +- **A tool that can**: Καλεί ένα εξωτερικό API για να πάρει την πρόγνωση καιρού για μια δεδομένη τοποθεσία." + +Ορίστε οι συναρτήσεις, το μόνο που έχεις να κάνεις είναι να τις καταχωρήσεις και να τις δοκιμάσεις: + +```javascript +function calculateDistance(lat1, long1, lat2, long2) { + // Perform the task of calculating the distance between two points + // Return the distance between the points + return Math.sqrt((lat2 - lat1) ** 2 + (long2 - long1) ** 2); +} + +function getGpsPosition() { + // Perform the task of getting the GPS position of the current location + // Return the GPS position + return { lat: 7.5, long: 134.5 }; +} + +function getWeatherForecast(lat, long) { + // Perform the task of getting the weather forecast for a given location + // Return the weather forecast + return "Sunny"; +} +``` + +**Εσύ**: "Time Beetle, είσαι σίγουρο ότι αυτές οι συναρτήσεις θα δουλέψουν; Μοιάζει να επιστρέφουν απλώς κάποιες τυχαίες τιμές." + +**Time Beetle**: "Σωστά, τα υπόλοιπα μπορώ να τα κάνω εσωτερικά. Το μόνο που χρειάζεται είναι να τις καταχωρήσεις και να τις δοκιμάσεις, να βεβαιωθείς ότι το AI model μπορεί να τις καλέσει." + +> Task: Register the `calculateDistance`, `getGpsPosition`, and `getWeatherForecast` tools with the AI model. Test the tools by calling them from the AI model. Use the code supplied in the previous sections as a reference. + +## Λύση + +[Solution](/lessons/06-tool-calling/solution/solution.js) + +## Έλεγχος γνώσεων + +**Ερώτηση:** +Ποιος είναι ο σκοπός της καταχώρησης ενός εργαλείου στο AI model; + +A. Να επιτρέπει στο AI model να εκτελεί απευθείας το εργαλείο χωρίς παρέμβαση του developer. +B. Να παρέχει metadata για το εργαλείο ώστε το AI model να μπορεί να προτείνει τη χρήση του. +C. Να αντικαθιστά την ανάγκη ορισμού συναρτήσεων στον κώδικα. + +**Ερώτηση:** +Ποιος είναι ο ρόλος των metadata του εργαλείου στο tool calling; + +A. Περιγράφουν τον σκοπό του εργαλείου, τις εισόδους και τις εξόδους του για το AI model. +B. Παρέχουν στο AI model τις λεπτομέρειες υλοποίησης του εργαλείου. +C. Διασφαλίζουν ότι το εργαλείο εκτελείται αυτόματα από το AI model. + +**Ερώτηση:** +Γιατί να χρησιμοποιήσεις tool calling; + +A. Για να επιτρέψεις στο AI model να εκτελεί εργασίες πέρα από τις ενσωματωμένες δυνατότητές του αξιοποιώντας εξωτερικές συναρτήσεις. +B. Για να αντικαταστήσεις την ανάγκη ανθρώπινης παρέμβασης στην ανάπτυξη του AI model. +C. Για να επιτρέψεις στο AI model να εκτελεί εργαλεία χωρίς να απαιτούνται metadata. + +[Solution quiz](/lessons/06-tool-calling/solution/solution-quiz.md) + +## Πόροι για αυτομελέτη + +- Εξηγεί τη [διαδικασία του tool calling](https://learn.microsoft.com/en-us/semantic-kernel/concepts/ai-services/chat-completion/function-calling/?pivots=programming-language-csharp) +- Tool calling στο [Langchain.js framework](https://js.langchain.com/docs/how_to/tool_calling/) +- Function calling όπως φαίνεται στη [βιβλιοθήκη openai](https://github.com/openai/openai-node/blob/master/examples/function-call.ts) diff --git a/lessons/07-mcp/translations/README.el.md b/lessons/07-mcp/translations/README.el.md new file mode 100644 index 00000000..84b4b73d --- /dev/null +++ b/lessons/07-mcp/translations/README.el.md @@ -0,0 +1,491 @@ +# Μάθημα 7: Πρωτόκολλο Πλαισίου Μοντέλου (Model Context Protocol, MCP) + +Σε αυτό το κεφάλαιο θα μάθεις: + +- Πώς να χρησιμοποιείς το Model Context Protocol / MCP (Πρωτόκολλο Πλαισίου Μοντέλου), ώστε να χωρίζεις τις δυνατότητες του server σου σε server και client +- Να δημιουργείς tools, resources και prompts στον server. +- Να καταναλώνεις τον server τόσο με το inspector tool όσο και με έναν γραμμένο client. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Setup your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about MCP](https://img.youtube.com/vi/YRfOiB0Im64/0.jpg)](https://www.youtube.com/watch?v=YRfOiB0Im64) + +_Αυτό το βίντεο εξηγεί το Model Context Protocol._ + +*🎥 Click on the image above to watch a short video about MCP* + +## Αφήγηση - Σκιπίων ο Αφρικανός + +> [!NOTE] +> _Η ιστορία μας μέχρι τώρα. Είσαι ένας μηχανικός από το Λονδίνο της δεκαετίας του 1860. Δούλευες πάνω στο αυτόματό σου και έλαβες ένα γράμμα από τον Charles Babbage που τελικά σε οδήγησε σε μια βιβλιοθήκη όπου έπιασες στα χέρια σου μια συσκευή ταξιδιού στον χρόνο. Στα ταξίδια σου στον χρόνο βρέθηκες στη Φλωρεντία, όπου γνώρισες τον Leonardo Da Vinci. Πήγες επίσης στην Αυτοκρατορία των Αζτέκων και από εκεί συνεχίζεται η ιστορία._ +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-scipio) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +_Οι ήρωές μας, έχοντας μόλις μάθει για τα tools και το "tool-calling" κατά τη συνάντησή τους με την Amelia Earhart, επιστρέφουν τώρα στο αρχοντικό της Ada Lovelace για να συζητήσουν τις νέες τους γνώσεις. Μια λάμψη φωτός τυλίγει τους ήρωές μας καθώς το time beetle τούς μεταφέρει πίσω στο παρόν της Ada. Βρίσκονται στο υπόγειο του αρχοντικού της Ada Lovelace. Ο Charles Babbage δεν είναι παρών, αλλά η Ada είναι εκεί και τους περιμένει. Ανυπομονεί να ακούσει για το ταξίδι τους και τη γνώση που απέκτησαν._ + +**Ada Lovelace**: "Καλώς ήρθατε πίσω! Ελπίζω το ταξίδι σας να ήταν διαφωτιστικό." + +**Εσύ**: "Ήταν! Η συνάντηση με την κυρία Earhart ήταν πραγματικά ξεχωριστή εμπειρία. Μας έμαθε για τη σημασία των εργαλείων και πώς να τα χρησιμοποιούμε αποτελεσματικά." + +**Ada Lovelace**: "Λίγοι άνθρωποι καταλαβαίνουν τη σημασία των εργαλείων καλύτερα από την Amelia. Ελπίζω επίσης να αναβαθμίσατε το Time Beetle της;" + +**Εσύ**: "Ναι, το κάναμε! Ποιο είναι το επόμενο βήμα;" + +**Ada Lovelace**: "Το tool calling είναι σίγουρα μια ισχυρή έννοια, που βελτιώνει τη συσκευή σου. Ωστόσο, της λείπει μια κάποια "λεπτότητα", ας πούμε. Πρέπει να μάθουμε _πώς να το κάνουμε να κλιμακώνεται_, χρειαζόμαστε ένα πρωτόκολλο. Ξέρω ακριβώς τον κατάλληλο άνθρωπο να σας βοηθήσει με αυτό. Το όνομά του είναι Σκιπίων ο Αφρικανός, ένας σπουδαίος στρατιωτικός στρατηγός της αρχαίας Ρώμης. Κρίμα που αφιέρωσε όλη του τη ζωή στη στρατηγική· είμαι σίγουρη ότι θα ήταν λαμπρός μηχανικός. Άντε, πηγαίνετε." + +**Εσύ**: "Σκιπίων ο Αφρικανός; Νομίζω τον θυμάμαι από το μάθημα ιστορίας." + +**Ada Lovelace**: "Ωραία, τότε γιατί είστε ακόμη εδώ; Ο χρόνος πιέζει. Ta ta" + +Η περιστροφή του φωτός σε τυλίγει ξανά και βρίσκεσαι σε μια μεγάλη αίθουσα με ένα μεγάλο τραπέζι στη μέση. Οι τοίχοι είναι διακοσμημένοι με χάρτες και στρατιωτικές στρατηγικές. Ο Σκιπίων ο Αφρικανός στέκεται δίπλα στο τραπέζι, βαθιά σκεπτικός. Σηκώνει το βλέμμα καθώς μπαίνεις. "Ada te misit/Ada sent you?" + +![Scipio Africanus](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/07-mcp/assets/scipio.png) + +> Ο Σκιπίων ο Αφρικανός, γνωστός και ως Publius Cornelius Scipio Africanus, ήταν εξέχων Ρωμαίος στρατηγός και πολιτικός που έζησε από το 236 π.Χ. έως το 183 π.Χ. Είναι περισσότερο γνωστός για τον καθοριστικό ρόλο του στον Β΄ Καρχηδονιακό Πόλεμο εναντίον της Καρχηδόνας και για τη νίκη του επί του Αννίβα στη Μάχη της Ζάμας το 202 π.Χ. +> Η ζωή και η καριέρα του ενσαρκώνουν τις ιδιότητες της ηγεσίας, της στρατηγικής ευφυΐας και της ανθεκτικότητας. Η συμβολή του στη στρατιωτική και πολιτική σφαίρα της Ρώμης άφησε διαρκές αποτύπωμα στη Ρωμαϊκή Αυτοκρατορία. + + +## Αλληλεπίδρασε με τον Σκιπίωνα + +Αν θέλεις να αλληλεπιδράσεις με τον Σκιπίωνα, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Scipio Africanus](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/07-mcp/assets/scipio.png) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με τον Σκιπίωνα. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + + +## Η ανάγκη για το Model Context Protocol (MCP) + +**Time Beetle**: Το πρωτόκολλο για το οποίο μίλησε η Ada ονομάζεται Model Context Protocol (MCP). Είναι ένα πρωτόκολλο που σου επιτρέπει να αποκεντρώνεις την αρχιτεκτονική της εφαρμογής σου, κάνοντάς την πιο επεκτάσιμη και ανθεκτική, προσθέτοντας resources σε έναν server, ή και σε πολλούς servers, και μεταφέροντας αυτό το βάρος από τον client. Θα αφήσω τον Σκιπίωνα να σου εξηγήσει την ιδέα. + +**Εσύ**: "Ναι, μας έστειλε η Ada. Είπε ότι μπορείς να μας βοηθήσεις με ένα πρωτόκολλο;" + +**Scipio**: "Πρωτόκολλο; Πέρασα τη ζωή μου αναπτύσσοντας στρατηγικές για μάχη. Αλλά υποθέτω ότι ένα πρωτόκολλο μοιάζει με στρατηγική. Σε βοηθά να οργανώνεις και να διαχειρίζεσαι αποτελεσματικά τους πόρους σου και εξασφαλίζει επικοινωνία μεταξύ τους". + +Ας μιλήσουμε για πλευρικούς ελιγμούς, διείσδυση και χρήση ιππικού. + +**Εσύ**: "Εντάξει, συνέχισε;" + +**Scipio**: "Στη μάχη, συχνά χρησιμοποιούμε πλευρικούς ελιγμούς για να επιτεθούμε στον εχθρό από τα πλάγια ή από τα νώτα. Αυτό διαταράσσει τους σχηματισμούς τους και μας δίνει πλεονέκτημα. Ο λόγος είναι ότι ο εχθρός δεν είναι προετοιμασμένος για επίθεση από το πλάι και τείνει να συγκεντρώνει όλη του την προσοχή στο μέτωπο. + +**Εσύ**: "Χμ, υποθέτω ότι αυτό μοιάζει με μια εφαρμογή που κάνει υπερβολικά πολλή δουλειά στην αρχή, πάνω σε έναν μόνο server. Οι πλευρικοί ελιγμοί θα ήταν σαν να μοιράζεις το φορτίο σε πολλούς servers, σωστά;" + +**Scipio**: "Ακριβώς! Διανέμοντας το φορτίο, μειώνεις τον κίνδυνο ενός single point of failure και βελτιώνεις τη συνολική ανθεκτικότητα του συστήματος. Γίνεται επίσης πιο εύκολο να διαχειρίζεσαι και να χρησιμοποιείς αποτελεσματικά τους πόρους. + +## Model Context Protocol (MCP) + +**Time Beetle**: "Για να προσθέσω στο σημείο του Σκιπίωνα, το Model Context Protocol (MCP) είναι ένας τρόπος να αποκεντρώνεις την αρχιτεκτονική της εφαρμογής σου. Σου επιτρέπει να σπας την εφαρμογή σου σε μικρότερα, πιο διαχειρίσιμα components που μπορούν να λειτουργούν ανεξάρτητα. Ακολουθούν μερικές σημαντικές έννοιες που πρέπει να έχεις υπόψη: + +- **MCP Hosts**: Προγράμματα όπως IDEs, για παράδειγμα GitHub Copilot στο Visual Studio Code ή Claude Desktop, που ξεκινούν σύνδεση με τον server ή τους servers. +- **MCP Clients**: Protocol clients που διατηρούν 1:1 συνδέσεις με MCP servers. +- **MCP Servers**: Ελαφριά προγράμματα που εκθέτουν συγκεκριμένες δυνατότητες μέσω MCP. +- **Local Data Sources**: Αρχεία, βάσεις δεδομένων και υπηρεσίες στον υπολογιστή σου στις οποίες οι MCP servers μπορούν να έχουν ασφαλή πρόσβαση. +- **Remote Services**: Εξωτερικά συστήματα διαθέσιμα μέσω internet (π.χ. APIs) στα οποία οι MCP servers μπορούν να συνδεθούν. + +και εδώ υπάρχει μια σύντομη επισκόπηση της αρχιτεκτονικής MCP: + +![Architecture of MCP](https://softchris.github.io/mcp-workshop/assets/images/diagram-791787b0cac57bc331c20e72b645d4f7.png) + +## Δομικά στοιχεία του MCP + +Για να χτίσεις έναν server, πρέπει να γνωρίζεις τα βασικά δομικά στοιχεία, τα οποία είναι: + +- **Tools**: Τα tools είναι πράγματα που υπολογίζουν κάτι για εσένα, δέχονται μια είσοδο, εκτελούν έναν υπολογισμό και παράγουν μια έξοδο. Συνήθως πρόκειται για υπολογισμό ή για καταχώρηση μιας παραγγελίας ή παρόμοια ενέργεια. + +- **Resources**: Ένα resource είναι στατικό δεδομένο· συνήθως αυτό σημαίνει ρυθμίσεις εφαρμογής, σχήματα βάσης δεδομένων ή κάποιο άλλο στατικό αρχείο σε έναν server, για παράδειγμα. + +- **Prompts**. Τα prompts, ή prompt templates, είναι σαν μια συνταγή που μπορείς να επαναχρησιμοποιείς. Η ιδέα είναι ότι, χρησιμοποιώντας μια τέτοια συνταγή, μπορείς μετά να της δώσεις parameters και να τα περάσεις σε ένα LLM ώστε να πετύχεις κάτι, όπως για παράδειγμα να δημιουργήσεις μια περιγραφή προϊόντος. + +### Ανακάλυψη Tools, Resources και Prompts + +**Εσύ**: "Και τι γίνεται με τη διείσδυση;" + +**Scipio**: "Η διείσδυση έχει να κάνει με τη χρήση μικρών μονάδων για να διεισδύουν στις γραμμές του εχθρού, ώστε να μαθαίνεις περισσότερα για τον εχθρό και να προκαλείς σύγχυση. + +**Εσύ**: "Μου ακούγεται σαν να μπορούμε να χρησιμοποιήσουμε αυτόν τον τρόπο σκέψης για να μάθουμε περισσότερα για τους servers μας, ποια tools, prompts και resources διαθέτουν. + +Συνοψίζοντας, θα πρέπει να: + +- **Χρησιμοποιώ πλευρικούς ελιγμούς**, ή στη δική μου περίπτωση να σπάω τα features ανά λειτουργικότητα εφαρμογής σε πολλούς διαφορετικούς MCP servers ώστε να μπορώ να κατανέμω servers ανά περιοχή χρήσης. Έτσι, είναι ευκολότερο να κλιμακώσω και να διαχειριστώ την εφαρμογή. Τέτοιοι servers μπορούν ακόμη και να ενημερώνονται ανεξάρτητα μεταξύ τους. +- **Χρησιμοποιώ διείσδυση**, ή στη δική μου περίπτωση, να καταλαβαίνω τι κάνουν αυτοί οι servers, ως προς τα tools, τα prompts και τα resources τους. Έτσι μπορώ να βεβαιωθώ ότι αλληλεπιδρώ με τον σωστό server και χρησιμοποιώ τα κατάλληλα tools για τη σωστή δουλειά. + +**Εσύ**: "Time Beetle, καταλαβαίνω σωστά τα πράγματα;" + +**Time Beetle**: "Ναι, τα καταλαβαίνεις σωστά. Οι στρατηγικές του Σκιπίωνα μπορούν να εφαρμοστούν στην αρχιτεκτονική της εφαρμογής σου. Αν θέλεις, μπορώ να σου διδάξω τις λεπτομέρειες του Model Context Protocol (MCP) και πώς να το υλοποιήσεις στην εφαρμογή σου;" + +**Εσύ**: "Ναι, παρακαλώ!" + +**Time Beetle**: "Ωραία, ας ξεκινήσουμε με τη δημιουργία ενός server" + +## Δημιουργία ενός MCP Server + +**Time Beetle**: "Για να δημιουργήσεις τον πρώτο σου MCP server, χρειάζεσαι δύο βιβλιοθήκες, τις `@modelcontextprotocol/sdk` και `zod`: + +- Η βιβλιοθήκη `@modelcontextprotocol/sdk` παρέχει τα απαραίτητα εργαλεία για να δημιουργείς και να διαχειρίζεσαι MCP servers. +- Η `zod` είναι μια βιβλιοθήκη δήλωσης και επικύρωσης σχημάτων με προτεραιότητα στο TypeScript, που σε βοηθά να ορίζεις και να επικυρώνεις τις δομές δεδομένων που χρησιμοποιούνται στον MCP server σου. + +```bash +npm install @modelcontextprotocol/sdk zod +``` + +Ακολουθεί ένα απλό παράδειγμα για το πώς να δημιουργήσεις έναν MCP server χρησιμοποιώντας αυτές τις βιβλιοθήκες: + +```typescript +import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js"; +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { z } from "zod"; + +// Create an MCP server +const server = new McpServer({ + name: "Demo", + version: "1.0.0" +}); +``` + +Ο προηγούμενος κώδικας κάνει τα εξής: + +- Εισάγει τις απαραίτητες classes και functions από τη βιβλιοθήκη `@modelcontextprotocol/sdk`. +- Δημιουργεί ένα instance του server. Η κλάση `McpServer` χρησιμοποιείται για τη δημιουργία του server και δέχεται ως παράμετρο ένα αντικείμενο με το όνομα και την έκδοση του server. + +**Εσύ**: "Αυτό δεν κάνει και πολλά, σωστά;" + +**Time Beetle**: "Όχι, όχι ακόμη. Αλλά μπορούμε να του προσθέσουμε resources και tools. Ένα tool είναι κάτι που μπορεί να χρησιμοποιηθεί για την εκτέλεση μιας συγκεκριμένης εργασίας, ενώ ένα resource είναι κάτι που μπορεί να χρησιμοποιηθεί για να παρέχει δεδομένα ή λειτουργικότητα στο tool. Ας προσθέσουμε μερικά παρακάτω: + +```typescript +server.tool("add", + { a: z.number(), b: z.number() }, + async ({ a, b }) => ({ + content: [{ type: "text", text: String(a + b) }] + }) + ); +``` + +Στον προηγούμενο κώδικα, κάνουμε τα εξής: + +- Ορίζουμε ένα tool με όνομα "add" που δέχεται δύο αριθμούς ως είσοδο και επιστρέφει το άθροισμά τους ως έξοδο. +- Περιγράφουμε τις input parameters και την επικύρωσή τους χρησιμοποιώντας zod. Η συνάρτηση `z.number()` χρησιμοποιείται για την επικύρωση των δεδομένων εισόδου, διασφαλίζοντας ότι τόσο το `a` όσο και το `b` είναι αριθμοί. +- Η `async` συνάρτηση χρησιμοποιείται για να πραγματοποιήσει την πρόσθεση και να επιστρέψει το αποτέλεσμα σε συγκεκριμένη μορφή. + +**Εσύ**: "Ενδιαφέρον, άρα το tool είναι σαν συνάρτηση που μπορεί να κληθεί από τον MCP client;" + +**Time Beetle**: "Ακριβώς! Ο MCP client μπορεί να καλέσει αυτό το tool και να περάσει τις απαιτούμενες παραμέτρους. Ας προσθέσουμε και ένα resource στον server: + +```typescript +server.resource( + "greeting", + new ResourceTemplate("greeting://{name}", { list: undefined }), + async (uri, { name }) => ({ + contents: [{ + uri: uri.href, + text: `Hello, ${name}!` + }] + }) + ); +``` + +Σε αυτόν τον κώδικα, κάνουμε τα εξής: + +- Ορίζουμε ένα resource με όνομα "greeting" που δέχεται ένα name ως είσοδο και επιστρέφει ένα greeting message. +- Χρησιμοποιούμε ένα resource template για να ορίσουμε πώς καλείται το resource `greeting://{name}`. Αυτό το schema χρησιμοποιείται για να καθορίσει τη μορφή URI του resource, η οποία περιλαμβάνει placeholder για το όνομα. +- Η `async` συνάρτηση χρησιμοποιείται για να δημιουργήσει το greeting message με βάση το παρεχόμενο όνομα. + +**Εσύ**: "Άρα, το resource είναι σαν data source, αυτό θα μπορούσε να είναι database, αρχείο ή ακόμη και API; Αν αυτό ήταν για αρχείο, θα χρησιμοποιούσα ένα file:// URI;" ως εξής: + +```typescript +server.resource( + "file", + new ResourceTemplate("file://{path}", { list: undefined }), + async (uri, { path }) => ({ + // do something with the file at path, e.g., read its contents + contents: [{ + uri: uri.href, + text: `File at ${path}` + }] + }) + ); +``` + +**Time Beetle**: "Ναι, ακριβώς! Το resource μπορεί να είναι οτιδήποτε παρέχει δεδομένα ή λειτουργικότητα στον MCP server. Μπορείς να ορίσεις resources για αρχεία, βάσεις δεδομένων, APIs ή οποιαδήποτε άλλη πηγή δεδομένων θέλεις να χρησιμοποιήσεις." + +Τώρα, ας προσθέσουμε ένα transport layer στον server ώστε να μπορεί να επικοινωνεί με clients." + +```typescript +// Start receiving messages on stdin and sending messages on stdout +const transport = new StdioServerTransport(); +await server.connect(transport); +``` + +Σε αυτόν τον κώδικα, κάνουμε τα εξής: + +- Δημιουργούμε ένα transport layer χρησιμοποιώντας την κλάση `StdioServerTransport`, η οποία επιτρέπει στον server να επικοινωνεί με clients μέσω standard input και output και εκτελείται στο τοπικό σου μηχάνημα. Υπάρχουν επίσης και άλλα transports όπως SSE και streaming HTTP που σου επιτρέπουν να τρέχεις απομακρυσμένα σε server, περισσότερα γι’ αυτά αργότερα. +- Καλούμε τη μέθοδο `connect` για να εδραιωθεί η σύνδεση μεταξύ του server και του transport layer. + +**Εσύ**: "Εντάξει, άρα τώρα έχουμε server, πώς τον τρέχουμε και τον δοκιμάζουμε;" + +## Εκτέλεση και δοκιμή του MCP Server + +**Εσύ**: "Σκιπίωνα, έχεις δοκιμάσει τις τακτικές σου;" + +**Scipio**: "Φυσικά! Η δοκιμή είναι κρίσιμη σε κάθε στρατηγική. Πρέπει πάντα να δοκιμάζεις τις τακτικές σου πριν τις εφαρμόσεις. Μάλιστα, θυμάμαι μια συγκεκριμένη μάχη όπου χρησιμοποίησα μια νέα τακτική και απέτυχε παταγωδώς, λεγόταν Battle of the Trebia. Πήρα το μάθημά μου και δεν ξανάκανα το ίδιο λάθος." + +**Εσύ**: "Και πώς δοκιμάζω τον MCP server μου;" + +**Time Beetle**: "Μπορείς να δοκιμάσεις τον MCP server σου εκτελώντας τον σε ένα terminal και τρέχοντας τον inspector ως εξής: + +```bash +npx @modelcontextprotocol/inspector node build/index.js +``` + +Παραπάνω, χρησιμοποιούμε το package `@modelcontextprotocol/inspector` για να εκτελέσουμε τον MCP server. Δίνουμε το argument `node build/index.js` για να καθορίσουμε το entry point του server. Αυτό θα εκκινήσει τον MCP server και θα σου επιτρέψει να αλληλεπιδράσεις μαζί του μέσω του inspector. + +**Εσύ**: "Και πώς αλληλεπιδρώ μαζί του;" + +**Time Beetle**: "Αυτό εκκινεί έναν web server στην port 6274. Μπορείς να αποκτήσεις πρόσβαση στον inspector ανοίγοντας τον web browser σου και πηγαίνοντας στο `http://localhost:6274`. Ο inspector προσφέρει ένα φιλικό προς τον χρήστη interface για αλληλεπίδραση με τον MCP server σου, επιτρέποντάς σου να δοκιμάζεις τα tools και τα resources που έχεις ορίσει." + +![Inspector user interface](https://softchris.github.io/mcp-workshop/assets/images/connect-7703c67645f368d51c7b24a5d635d6a0.png) + +### -1- Σύνδεση με τον Server + +**Time Beetle**: Επίλεξε "Connect" και θα πρέπει να δεις το παρακάτω παράθυρο: + +![Connecting to server](https://softchris.github.io/mcp-workshop/assets/images/connected-7c3570d5d0a8659e27740d2950031cb3.png) + +Θα πρέπει να αναφέρει ότι είσαι συνδεδεμένος. Τώρα μπορείς να αλληλεπιδράσεις με tools ή resources στη συνέχεια. + +### -2- Λίστα Tools και Resources + +**Time Beetle**: "Στη συνέχεια, θέλουμε να εμφανίσουμε τη λίστα με τα tools και τα resources που είναι διαθέσιμα στον server. Μπορείς να το κάνεις επιλέγοντας "List tools", για να δεις ποια tools είναι διαθέσιμα: + +![Listing tools](https://softchris.github.io/mcp-workshop/assets/images/tools-listed-630aa49c9d7e4347108419fb83c409f6.png) + +Τώρα θα πρέπει να βλέπεις το tool "add" στη λίστα. Μπορείς επίσης να εμφανίσεις τα resources επιλέγοντας την καρτέλα "Resources". + +### -3- Εκτέλεση του Tool + +**Time Beetle**: "Για να εκτελέσεις το tool, επίλεξε το tool "add" από τη λίστα. Συμπλήρωσε τις παραμέτρους στο παράθυρο διαλόγου που εμφανίζεται στη δεξιά πλευρά της οθόνης. Για παράδειγμα, μπορείς να εισαγάγεις `a=5` και `b=10` για να προσθέσεις αυτούς τους δύο αριθμούς. Κάνε κλικ στο "Run Tool" για να εκτελέσεις το tool. Θα πρέπει να δεις το αποτέλεσμα στην περιοχή εξόδου από κάτω. Το αποτέλεσμα θα πρέπει να είναι `15`." + +![Run the tool](https://softchris.github.io/mcp-workshop/assets/images/ran-tool-271ecd5f84a457462e59789b579ee9d4.png) + +**Scipio**: "Ενδιαφέρον, μακάρι να μπορούσα να δοκιμάζω έτσι τις στρατηγικές μου. Φαίνεται πολύ χρήσιμο." + +**Εσύ**: "Ναι, πράγματι! Καταλαβαίνω πόσο χρήσιμο θα ήταν αυτό για δοκιμές και debugging." + +## Δημιουργία ενός Client + +**Time Beetle**: "Μπορείς επίσης να δημιουργήσεις έναν client που συνδέεται στον MCP server και αλληλεπιδρά μαζί του. Ακολουθεί ένα παράδειγμα για το πώς να δημιουργήσεις έναν απλό MCP client χρησιμοποιώντας τη βιβλιοθήκη `@modelcontextprotocol/sdk`: + +```typescript +import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js"; + +const transport = new StdioClientTransport({ + command: "node", + args: ["server.js"] +}); + +const client = new Client( + { + name: "example-client", + version: "1.0.0" + } +); + +await client.connect(transport); +``` + +Στον προηγούμενο κώδικα, κάνουμε τα εξής: + +- Δημιουργούμε ένα transport layer χρησιμοποιώντας την κλάση `StdioClientTransport`, η οποία επιτρέπει στον client να επικοινωνεί με τον MCP server μέσω standard input και output. +- Ξεκινάμε ένα νέο `Client` instance με όνομα και έκδοση. +- Συνδέουμε τον client με το transport layer χρησιμοποιώντας τη μέθοδο `connect`. + +**Εσύ**: "Να μαντέψω, υπάρχουν πολλά ακόμη που μπορούμε να κάνουμε με τον client;" + +**Time Beetle**: Ναι, ας μιλήσουμε τώρα γι’ αυτό. Ο MCP client μπορεί να χρησιμοποιηθεί για να αλληλεπιδρά με τον server, να καλεί tools και να προσπελαύνει resources. + +### Λίστα και κλήση Tools και Resources + +**Time Beetle**: "Γενικά υπάρχουν δύο σενάρια που θέλεις να καλύψεις: να εμφανίζεις τη λίστα με tools και resources, και να τα καλείς. Δες πώς γίνεται: + +```typescript +// List prompts +const prompts = await client.listPrompts(); + +// List resources +const resources = await client.listResources(); + +// list tools +const tools = await client.listTools(); +``` + +**Εσύ**: Αυτό είναι εξαιρετικό, έτσι ξέρω ποιες δυνατότητες έχει ο server. Αλλά πώς τα καλώ; + +**Time Beetle**: "Σωστά, ας περάσω σε ένα συγκεκριμένο παράδειγμα, πρώτα για τα tools. Ξεκινάς ρωτώντας ποια tools έχεις, μετά μπορείς να αποθηκεύσεις αυτή την απόκριση και στη συνέχεια να καλέσεις το tool που θέλεις. Δες ένα παράδειγμα: + +Όταν εμφανίζεις τη λίστα με τα tools, παίρνεις μια απόκριση στην ακόλουθη μορφή: + +```json + + { + "name": "", + "description": "", + "inputSchema": { + "type":"object", + "properties":{ + "a":{ + "type":"number" + }, + "b":{ + "type":"number" + }}, + "required":["a","b"], + "additionalProperties":false, + "$schema":"http://json-schema.org/draft-07/schema#" + } + } +``` + +πράγμα που σημαίνει ότι, αν έχεις ένα tool `add`, η απόκριση της λίστας tools μοιάζει ως εξής: + +```json +{ + "name": "add", + "description": "Adding two numbers", + "inputSchema": { + "type":"object", + "properties":{ + "a":{ + "type":"number" + }, + "b":{ + "type":"number" + }}, + "required":["a","b"], + "additionalProperties":false, + "$schema":"http://json-schema.org/draft-07/schema#" + } +} +``` + +**Εσύ**: "Εντάξει, ωραία, άρα μπορώ να το αποθηκεύσω σε μια μεταβλητή και μετά να καλέσω το tool που θέλω;" + +**Time Beetle**: "Ακριβώς! Ας δούμε τώρα πώς μπορεί να κληθεί ένα tool:" + +```typescript +// List tools +const { tools } = await client.listTools(); + +const addTool = tools[0]; // Assuming the first tool is "add" +const subtractTool = tools[1]; // Assuming the second tool is "subtract" + +// Call a tool +const result = await client.callTool({ + name: addTool.name, + arguments: { + a: 5, + b: 10 + } +}); +``` + +**Εσύ**: "Εντάξει, βγάζει νόημα. Και τι γίνεται με τα resources;" + +**Time Beetle**: "Τα resources είναι παρόμοια, αλλά πρέπει να δώσεις το resource URI και όποιες παραμέτρους απαιτεί. Ακολουθεί ένα παράδειγμα: + +```typescript +let resourceUri = "greeting://John"; // Replace with the actual resource URI + +// call resource +// Read a resource +const name = "John Doe"; // Replace with the actual name + +const resourceResult = await client.readResource({ + uri: `greeting:///${name}`, +}); + +console.log(resourceResult); // Hi John Doe! +``` + +**Εσύ**: "Το καταλαβαίνω, ωραία, αν και σκέφτεσαι από μέσα σου, στοιχηματίζω ότι μπορούμε να το βελτιώσουμε κάπως αυτό; Time Beetle, μπορούμε να το βελτιώσουμε, σωστά; + +**Time Beetle**: Ναι, αλλά πρώτα πρώτα, ας κάνουμε τον Σκιπίωνα χαρούμενο. Πρέπει να μιλήσουμε με μια κυρία Lamarr στην επόμενη στάση μας. + +## Εργασία - Δημιουργία Συστήματος Διαχείρισης Αποθέματος και Εργαλείων για τον Σκιπίωνα + +**Scipio**: "Ξέρεις, έχω τόσους πολλούς παπύρους και κυλίνδρους σκορπισμένους παντού. Θα μου ήταν πολύ χρήσιμο ένα εργαλείο που να με βοηθά να τους οργανώνω. Έχω επίσης και αυτόν τον άβακα που χρησιμοποιώ για υπολογισμούς. Μπορείς να με βοηθήσεις να δημιουργήσω ένα εργαλείο για να διαχειρίζομαι το απόθεμά μου;" + +Ακολουθεί ένα πλήρες απόθεμα των κυλίνδρων μου: + +- Scroll of Tactics. +- Scroll of food supply. + +Α, ορίστε κι ένας Taxation scroll. Η φορολογία είναι μεγάλη υπόθεση, η Αυτοκρατορία θέλει το μερίδιό της από ό,τι αποκτούμε. Έχετε λύσει αυτό το θέμα στη δική σας εποχή; Μην απαντήσεις, δεν θέλω να ξέρω. + +Το εργαλείο άβακα, το χρειάζομαι να υποστηρίζει τις παρακάτω πράξεις: + +- Add: Πρόσθεσε δύο αριθμούς μαζί. +- Subtract: Αφαίρεσε έναν αριθμό από έναν άλλο. +- Multiply: Πολλαπλασίασε δύο αριθμούς. +- Divide: Διαίρεσε έναν αριθμό με έναν άλλο. + +## Λύση + +[Solution](/lessons/07-mcp/solution/README.md) + +## Έλεγχος γνώσεων + +**Ερώτηση**: Ποιοι είναι οι διαφορετικοί τύποι resources που μπορεί να εκθέσει ένας MCP Server; + +A. Tools και Web endpoints + +B. Tools και Resources + +C. Tools, Resources και Prompts + + +**Ερώτηση**: Ποιοι είναι μερικοί τρόποι με τους οποίους μπορείς να δοκιμάσεις τον MCP Server σου; + +A. Inspector + +B. Έναν custom MCP client + +C. Visual Studio Code + +D. curl + +E. Όλα τα παραπάνω + +[Solution Quiz](/lessons/07-mcp/solution/solution-quiz.md) + +## Σύνοψη + +Σε αυτό το κεφάλαιο, μάθαμε τα εξής: + +- Το Model Context Protocol, MCP, είναι ένας εξαιρετικός τρόπος για να μεταφέρεις δυνατότητες σε servers αντί να βάζεις όλα τα features σου σε ένα μόνο μέρος. Αυτό επιτρέπει στις εφαρμογές σου να παραμένουν μικρές και εστιασμένες. Το επιπλέον όφελος είναι ότι διαφορετικές ομάδες μπορούν επίσης να διαχειρίζονται διαφορετικούς servers. Χάρη στο ότι το MCP είναι πρωτόκολλο, αυτό σημαίνει επιπλέον ότι οποιοσδήποτε θέλει να μοιραστεί δυνατότητες μπορεί να το κάνει σε κοινή μορφή. +- Επιπλέον, εξετάσαμε πώς να καταναλώνεις έναν MCP Server χρησιμοποιώντας το Inspector tool ή έναν γραμμένο client. + +## Πόροι για αυτομελέτη + +- [Building MCP Servers](https://github.com/microsoft/mcp-for-beginners/tree/main/03-GettingStarted/01-first-server) diff --git a/lessons/08-mcp-advanced/translations/README.el.md b/lessons/08-mcp-advanced/translations/README.el.md new file mode 100644 index 00000000..30208bbb --- /dev/null +++ b/lessons/08-mcp-advanced/translations/README.el.md @@ -0,0 +1,264 @@ +# Μάθημα 8: Βελτιώνοντας πελάτες MCP (Clients) με Μεγάλα Γλωσσικά Μοντέλα (Large Language Models) + +Στο προηγούμενο μάθημα, δημιούργησες έναν MCP Server και εξερεύνησες πώς βοηθά να αποσυνδέεται η λογική μιας εφαρμογής AI από τις δυνατότητές της. Δείξαμε πώς να προσθέτεις tools και resources ως capabilities και πώς ο server μπορεί να προσπελαστεί είτε από ένα inspector tool είτε από έναν custom client. Αυτό ήταν μόνο η αρχή. Σε αυτό το κεφάλαιο, θα προχωρήσεις ένα βήμα παραπέρα ενσωματώνοντας ένα large language model (LLM) στον client—ξεκλειδώνοντας μια πιο ισχυρή και πιο διαισθητική εμπειρία χρήστη. + +Σε αυτό το κεφάλαιο θα μάθεις να: + +- Ενισχύεις τον client σου με ένα LLM. +- Χρησιμοποιείς τον βελτιωμένο client σου για να μετατρέπεις μια απόκριση MCP Server σε tool. +- Αξιοποιείς τον βελτιωμένο client σου για να δημιουργείς μια πιο φυσική αλληλεπίδραση με τον χρήστη. + +## Ρύθμιση + +Αν δεν το έχεις κάνει ήδη, ρύθμισε το περιβάλλον ανάπτυξής σου. Δες εδώ πώς μπορείς να το κάνεις: [Set up your environment](/docs/setup/README.md). + +## Σχετικοί πόροι + +[![Watch a short video about MCP](https://img.youtube.com/vi/YRfOiB0Im64/0.jpg)](https://www.youtube.com/watch?v=YRfOiB0Im64) + +_Αυτό το βίντεο εξηγεί τη χρήση LLM με το Model Context Protocol._ + +*🎥 Click on the image above to watch a short video about MCP* + + +## Αφήγηση: Hedwig "Hedy" Lamarr + +> [!NOTE] +> _Η ιστορία μας μέχρι τώρα. Είσαι ένας μηχανικός από το Λονδίνο της δεκαετίας του 1860. Δούλευες πάνω στο αυτόματό σου και έλαβες ένα γράμμα από τον Charles Babbage που τελικά σε οδήγησε σε μια βιβλιοθήκη όπου έπιασες στα χέρια σου μια συσκευή ταξιδιού στον χρόνο. Στα ταξίδια σου στον χρόνο βρέθηκες σε πολλά μέρη της ιστορίας. Τώρα συνεργάζεσαι πιο στενά με την Ada Lovelace, με το αρχοντικό της να λειτουργεί ως βάση επιχειρήσεων, και από εκεί συνεχίζεται η ιστορία._ +> +> Δες το [Lesson 1](/lessons/01-intro-to-genai/README.md) αν θέλεις να παρακολουθήσεις την ιστορία από την αρχή. + +> [!NOTE] +> Παρότι προτείνουμε να ακολουθήσεις την ιστορία (είναι διασκεδαστική!), [click here](#interact-with-hedy-lamarr) αν προτιμάς να πας κατευθείαν στο τεχνικό περιεχόμενο. + +Ταξίδεψες ξανά πίσω στο αρχοντικό της Ada. Αυτή τη φορά η Ada σε περίμενε στις κεντρικές πύλες. + +**Ada Lovelace**: Λοιπόν, πώς πήγε; + +**Εσύ**: Καλά νομίζω, καταφέραμε να βάλουμε αυτήν την εφαρμογή να λειτουργεί. "Ορίστε, δες και μόνη σου", λες και της δίνεις τη συσκευή. + +**Ada Lovelace**: Παίρνει τη συσκευή, την εξετάζει προσεκτικά και μουρμουρίζει στον εαυτό της. "Μμμ χμ, α ναι, κατάλαβα, ναι, ναι όχι, αυτό δεν κάνει. Του λείπει μια κάποια φινέτσα". + +**Εσύ**: Το σκεφτόμουν κι εγώ, πρέπει να μπορούμε να της μιλάμε ή να πληκτρολογούμε σε αυτήν, σωστά; + +**Ada Lovelace**: Σωστά, ξέρω ακριβώς το κατάλληλο άτομο για να μας βοηθήσει. Στην πραγματικότητα, θα έρθω μαζί σου αυτή τη φορά, έχει περάσει πολύς καιρός από τότε που συναντηθήκαμε. *Time Beetle, Hollywood please, 1940, residence of Hedy Lamarr*. + +Όλα σβήνουν στο μαύρο. Στροβιλιζόμενα χρώματα περνούν με ορμή και λίγες στιγμές αργότερα η όρασή σου αρχίζει να καθαρίζει. Βλέπεις έναν άντρα να κάθεται δίπλα σε ένα πιάνο, να μιλά με ζωντάνια με μια γυναίκα με σκούρα καστανά και σγουρά μαλλιά. Και οι δύο χειρονομούν έντονα καθώς μιλούν. + +![Hedy Lamarr](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/08-mcp-advanced/assets/hedy-invention.jpeg) + +Η γυναίκα γυρίζει προς την Ada που στέκεται δίπλα σου και αναφωνεί: "Ada, εσύ είσαι, πάει πάρα πολύς καιρός". + +**Ada Lovelace**: Αγαπημένη Hedwig, δουλεύεις πάνω στην τελευταία σου εφεύρεση υποθέτω; + +**Hedy Lamarr**: Ναι, στην πραγματικότητα ο George κι εγώ νομίζουμε ότι βρισκόμαστε μπροστά σε κάτι μεγάλο - "frequency hopping" αλλά μάλλον δεν θα έπρεπε να πω περισσότερα, ποιος ξέρει ποιος ακούει. + +**Ada Lovelace**: Ω, εννοείς εκείνον, λέει δείχνοντας εμένα, είναι στη δική του περιπέτεια. + +**Hedy Lamarr**: Κατάλαβα, τι μπορώ να κάνω για εσάς; + +**Ada Lovelace**: Στην πραγματικότητα, χρειαζόμαστε αυτή τη συσκευή να λειτουργεί λίγο καλύτερα. Καμία ιδέα; + +**Hedy Lamarr**: Σηκώνει τη συσκευή και την κοιτάζει από διαφορετικές γωνίες. "Λες ότι έχετε ήδη διαχωρίσει τα features από το κομμάτι της επικοινωνίας;" + +**Ada Lovelace**: Ναι, ναι, το κάναμε. + +**Hedy Lamarr**: Τότε, εγώ απλώς θα έκανα το κομμάτι της επικοινωνίας λίγο πιο έξυπνο. Αυτό μου θυμίζει μια συζήτηση που είχα με έναν δόκιμο του ναυτικού όταν προσπαθούσα να πουλήσω πολεμικά ομόλογα. Minsky ήταν το όνομά του, νομίζω. "What does Human intelligence look like in a machine" ήταν το θέμα. Έχω την αίσθηση ότι μια μέρα θα κάνει κάτι σπουδαίο σε αυτόν τον χώρο. Οπότε ναι, δώστε του περισσότερη ευφυΐα. + +**Ada Lovelace**: Σωστά, λοιπόν, άκουσες την κυρία Lamarr, ξεκίνα. + +**Εσύ**: Time Beetle, πώς το κάνουμε αυτό; + +**Time Beetle**: Μπορείς να βελτιώσεις τον client που δημιούργησες νωρίτερα ενσωματώνοντας ένα large language model, ή LLM. + +> Η Hedy Lamarr ήταν μια εξαιρετική προσωπικότητα, γνωστή τόσο για τη λάμψη της στο Hollywood όσο και για τη σημαντική συμβολή της στην τεχνολογία. +> +> Ωστόσο, πέρα από την καριέρα της ως ηθοποιού, η Lamarr ήταν και μια λαμπρή εφευρέτρια. Κατά τη διάρκεια του Β΄ Παγκοσμίου Πολέμου, συν-εφηύρε με τον συνθέτη George Antheil ένα σύστημα ραδιοκαθοδήγησης για τορπίλες των Συμμάχων. Αυτό το σύστημα χρησιμοποιούσε τεχνολογία spread spectrum και frequency hopping για να αποτρέπει τις Δυνάμεις του Άξονα από το να παρεμβάλλουν τα σήματα. Αν και δεν χρησιμοποιήθηκε κατά τη διάρκεια του πολέμου, αυτή η τεχνολογία αποτέλεσε αργότερα τη βάση της σύγχρονης ασύρματης επικοινωνίας, συμπεριλαμβανομένων των Wi-Fi, Bluetooth και GPS. +> +> Η συμβολή της Lamarr στην τεχνολογία δεν αναγνωρίστηκε πλήρως κατά τη διάρκεια της ζωής της, αλλά σήμερα τιμάται ως πρωτοπόρος στον χώρο. Η ιστορία της είναι ένας συναρπαστικός συνδυασμός γοητείας και ιδιοφυΐας, δείχνοντας ότι η αληθινή καινοτομία μπορεί να έρθει από τα πιο απρόσμενα μέρη. +> Read more here about [Hedy Lamarr](https://en.wikipedia.org/wiki/Hedy_Lamarr) and here about [Marvin Minsky](https://en.wikipedia.org/wiki/Marvin_Minsky) + + +## Αλληλεπίδρασε με την Hedy Lamarr + +Αν θέλεις να αλληλεπιδράσεις με την Hedy, εκτέλεσε την εφαρμογή [Characters](/app/README.md). + +> [!IMPORTANT] +> Αυτό είναι εξ ολοκλήρου φανταστικό· οι απαντήσεις δημιουργούνται από AI. +> [Αποποίηση ευθύνης για Responsible AI](/README.md#responsible-ai-disclaimer) + +![Hedy Lamarr](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/08-mcp-advanced/assets/hedylamarr.jpeg) + +**Βήματα**: + +1. Ξεκίνησε ένα [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Πήγαινε στο _/app_ στη ρίζα του αποθετηρίου. +3. Βρες την κονσόλα και εκτέλεσε `npm install` και μετά `npm start`. +4. Μόλις εμφανιστεί, επίλεξε το κουμπί "Open in Browser". +5. Συνομίλησε με την Hedy. + +Για μια πιο αναλυτική εξήγηση της εφαρμογής, δες το [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Αν εκτελείς το project τοπικά στον υπολογιστή σου, δες τον οδηγό QuickStart για να ρυθμίσεις ένα token [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) και αντικατέστησε το κλειδί στον κώδικα. + + +## Προσθήκη ενός Large Language Model σε έναν Client + +**Time Beetle**: "Όπως έλεγα, ας μιλήσουμε για το πώς μπορείς να δημιουργήσεις έναν client που χρησιμοποιεί ένα large language model (LLM) για να αλληλεπιδρά με τον MCP server. Τα οφέλη είναι ότι προσφέρει καλύτερη εμπειρία χρήστη και σου επιτρέπει να χρησιμοποιείς φυσική γλώσσα για να αλληλεπιδράς με τον server." + +Ακολουθεί πώς θα λειτουργούσε αυτό σε υψηλό επίπεδο: + +1. Ο client αλληλεπιδρά με τον MCP server για να ρωτήσει ποια tools και resources είναι διαθέσιμα. + +1. Τη στιγμή του prompt, ο χρήστης θα γράφει ένα prompt σε φυσική γλώσσα, το οποίο στη συνέχεια θα στέλνεται στο LLM μέσα στον client. + +1. Ο client καταλαβαίνει ποιο tool ή ποιο resource πρέπει να καλέσει με βάση το prompt και τα διαθέσιμα tools και resources. + +Ακούγεται εφικτό, σωστά; + +**Εσύ:** Ναι, ακούγεται! Αλλά πώς το κάνω αυτό; + +**Time Beetle:** Ας βελτιώσουμε τον client που δημιούργησες νωρίτερα, ας περιγράψουμε τις αλλαγές στον κώδικα σε βήματα: + +1. Κάνε μια κλήση στον server για να ζητήσεις τα διαθέσιμα tools και resources. +2. Μετέτρεψε την απόκριση για tools και resources σε tools schema που να μπορεί να χρησιμοποιηθεί από το LLM. +3. Δημιούργησε τον OpenAI client. +4. Κάνε ένα chat completion call στο OpenAI, περνώντας το tools schema ως παράμετρο. +5. Κατάλαβε ποιο tool πρέπει να κληθεί με βάση την απόκριση από το OpenAI. +6. Κάλεσε το tool στον server χρησιμοποιώντας τον MCP client. +7. Απάντησε στον χρήστη με το αποτέλεσμα. + +Ορίστε όλα τα βήματα σε κώδικα: + +```typescript +import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js"; + + +// create client instance +const transport = new StdioClientTransport({ + command: "node", + args: ["server.js"] +}); + +const client = new Client( + { + name: "example-client", + version: "1.0.0" + } +); + +await client.connect(transport); + +// 1. make call to server, ask it for tools +const { tools } = await client.listTools(); + +// convert function +function toToolSchema(method, schema) { + return { + name: method, + description: `This is a tool that does ${method}`, + parameters: schema, + }; +} + +// 2. convert the tools and resources response to a tools schema +const toolsForLLM = tools.map((tool) => { + return toToolSchema(tool.method, tool.inputSchema); +}); + +// 3. instantiate openai client +const openai = new OpenAI({ + apiKey: process.env.OPENAI_API_KEY, + model: "gpt-3.5-turbo", + temperature: 0.7, +}); + +// 4. make chat completion call to openai +const response = await openai.chat.completions.create({ + messages: [ + { + role: "user", + content: `I want to add 5 and 10. Please use the tool ${toolsForLLM}`, + }, + ], + functions: toolsForLLM, + function_call: "auto", +}); + +// 5. figure out what tool to call based on the response from openai +const toolName = response.choices[0].message.function_call.name; // add +const args = response.choices[0].message.function_call.arguments; // { a: 5, b: 10 } + +// 6. call the tool on the server +const result = await client.callTool({ + name: toolName, + arguments: args, +}); + +// 7. respond to user +console.log(result); // 15 +``` + +Στον προηγούμενο κώδικα εμείς (εστιάζοντας στις προσθήκες μας): + +- Δημιουργήσαμε μια συνάρτηση `toToolSchema` που μετατρέπει την απόκριση tools και resources σε schema που μπορεί να χρησιμοποιηθεί από το LLM. +- Ζητήσαμε από τον server τα διαθέσιμα tools και resources. +- Μετατρέψαμε την απόκριση tools και resources σε schema που μπορεί να χρησιμοποιηθεί από το LLM. +- Κάναμε chat completion call στο AI μας, περνώντας τα μετατραπέντα tools ως παράμετρο. +- Καταλάβαμε ποιο tool πρέπει να κληθεί με βάση την απόκριση από το OpenAI. +- Καλέσαμε το tool στον server χρησιμοποιώντας τον MCP client. +- Επιστρέψαμε το αποτέλεσμα στον χρήστη. + +**Εσύ**: "Μου αρέσει αυτό, είναι πολύ καλύτερο! Μπορώ να χρησιμοποιώ φυσική γλώσσα χωρίς να γνωρίζω καν ποια tools και resources είναι διαθέσιμα. Μπορώ απλώς να ζητήσω από την AI να το κάνει για μένα." + +**Time Beetle**: "Χαίρομαι που σου αρέσει. Πρέπει όμως να ειπωθεί ότι ίσως θελήσεις να αποφασίσεις αν θέλεις να εμφανίζεις μόνο απόκριση tool ή αν θέλεις να εμφανίζεις και γενική απόκριση από το LLM. Άρα ο χρήστης σου ίσως ωφεληθεί από την παρακάτω στρατηγική απόκρισης: + +- **Tools only**: Αν η απόκριση του LLM είναι tool, τότε κάλεσε το tool και επέστρεψε το αποτέλεσμα. +- **LLM only**: Αν η απόκριση του LLM δεν είναι tool, τότε επέστρεψε την απόκριση του LLM "as is". +- **Tools and LLM**: Αν η απόκριση του LLM είναι tool, τότε κάλεσε το tool και κάνε μία επιπλέον κλήση στο LLM για να πάρεις τη γενική απόκριση. Επέστρεψε τόσο το αποτέλεσμα του tool όσο και την απόκριση του LLM. + +**Εσύ**: "Καταλαβαίνω. Κάτι να το σκεφτώ. Αλλά αυτό είναι εξαιρετικό! Μπορώ να δω πόσο χρήσιμο θα ήταν." + +## Εργασία + +**Ada Lovelace**: Φαίνεται ότι έκανες μια πολύ καλή βελτίωση. Για να είναι αυτό πραγματικά χρήσιμο, θέλω να δημιουργήσεις έναν server και έναν client με τις παρακάτω προδιαγραφές: + +- Ο server θα πρέπει να παρέχει τα παρακάτω tools: + - `characterDetails` με όρισμα `name` + - `place` με όρισμα `name` +- Ο client θα πρέπει να χρησιμοποιεί ένα LLM. + +> [!TIP] +> Για παράδειγμα, μπορείς να δώσεις στον server τη δυνατότητα να ανακτά πληροφορίες από ένα εξωτερικό web API, όπως η Wikipedia: +> `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(name)}` + +## Λύση + +[Solution](/lessons/08-mcp-advanced/solutions/README.md) + +## Έλεγχος γνώσεων + +**Ερώτηση:** Ποιο είναι ένα όφελος της προσθήκης ενός LLM στον client; + +A. Είναι πιο εύκολο στη συντήρηση. + +B. Δημιουργεί μια πιο φυσική συνομιλία μεταξύ του χρήστη και του server. + +C. Είναι καλύτερο να βρίσκεται το LLM στον server. + +[Solution quiz](/lessons/08-mcp-advanced/solutions/solution-quiz.md) + +## Σύνοψη + +Σε αυτό το κεφάλαιο, έμαθες τα εξής: + +- Οι clients που ενισχύονται με ένα LLM προσφέρουν καλύτερη εμπειρία χρήστη. +- Οι αποκρίσεις από έναν server πρέπει να μετατρέπονται σε μορφή που το LLM μπορεί να καταλάβει ως tool. + +## Πόροι για αυτομελέτη + +- [Building MCP Servers](https://github.com/microsoft/mcp-for-beginners/tree/main/03-GettingStarted/01-first-server/README.md) +- [Building a Client](https://github.com/microsoft/mcp-for-beginners/tree/main/03-GettingStarted/02-client/README.md) +- [Building a Client with an LLM](https://github.com/microsoft/mcp-for-beginners/blob/main/03-GettingStarted/03-llm-client/README.md)