From 49fcbfb544e697ab3b104d53655047d02a197fc3 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Wed, 23 Apr 2025 14:10:07 +0200 Subject: [PATCH 01/22] feat: add a first draft of the Italian translation for Lesson 1 --- .../translations/README.it-it.md | 361 ++++++++++++++++++ 1 file changed, 361 insertions(+) create mode 100644 lessons/01-intro-to-genai/translations/README.it-it.md diff --git a/lessons/01-intro-to-genai/translations/README.it-it.md b/lessons/01-intro-to-genai/translations/README.it-it.md new file mode 100644 index 00000000..883716c4 --- /dev/null +++ b/lessons/01-intro-to-genai/translations/README.it-it.md @@ -0,0 +1,361 @@ +# Lezione 1: Introduzione alla IA Generativa e ai LLM per sviluppatori JavaScript + +In questo capitolo imparerai: + +- a capire le basi della IA Generativa e dei Large Language Model (LLM); +- a identificare le potenziali applicazioni e limitazioni dei LLM nello sviluppo JavaScript; +- a esplorare come la IA Generativa può migliorare le esperienze degli utenti nelle applicazioni JavaScript. + +## Configurazione + +Se non lo hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Guarda un breve video su una Introduzione alla IA Generativa](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) + +_Questo video ti dà una introduzione alla IA Generativa con JavaScript_ + +💼 Slide: [Introduzione alla IA Generativa](../../videos/slides/00-intro.pptx) + +## IA Generativa + +Fino ad ora, probabilmente ai sentito parlare di strumenti come ChatGPT o IA Generativa. Il concetto è semplice: tu fai una richiesta e un modello (spesso chiamato Large Language Model (LLM)) genera un paragrafoo o persino una pagina intera di testo. Questo output può essere usato per scopi diversi, tra cui la scrittura creativa, la risposta a domande e il coding. + +Inoltre, la IA Generativa si è evoluta in capacità multimodali, permettendoti di fornire una immagine o un video come input e di ricevere una varietà di output. Questo avanzamento ha significativamente migliorato This advancement has significantly enhanced i flusso di lavoro di molte persone: non solo generando testo, ma anche riassumendo, traducendo e altro ancora. + +*In poche parole, le interfacce in linguaggio naturale stanno diventando la nuova interfaccia standard per molte app e i tuoi utenti si aspettano di usarle.* + +## Narrazione: Un viaggio nel tempo + +> [!NOTA] +> Iniziamo con una panoramica della storia: una storia che collega il passato e il futuro! Procedendo in questo curriculum, ti imbarcherai in un’avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle più grandi menti della storia. Insieme, affronterete sfide ed esplorerete come l’IA Generativa può rivoluzionare le tue applicazioni JavaScript._ + +> [!NOTA] +> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interact-with-dinocrates) se preferisci saltare direttamente al contenuto tecnico. + +Il tuo viaggio inizia nella Londra del 1860, dove assumerai il ruolo di un abile meccanico. Attraverso una serie di avvincenti avventure, affinerai le tue abilità in IA e sbloccherai soluzioni che trascendono il tempo. + +### Nel vortice - Londra 1860 + +Nel cuore della Londra degli anni ’60 del 1800, sei considerato come uno dei più abili meccanici del tuo tempo. La tua officina è nascosta in uno stretto vicolo.Le pareti sono tappezzate di scaffali traboccanti di pezzi meccanici, cianografie e progetti semilavorati. + +Il tuo banco da lavoro, il cuore della tua officina, è un disordine organizzato. + +
+ Officina di Londra +
+ +_Al centro del banco si trova il torso di un robot, una meraviglia dell’ingegneria che ha richiesto mesi di sforzi. La sua struttura in legno è intricata e ogni giuntura è stata meticolosamente progettata per garantire un movimento fluido._ + +### A letter, for you? + +Suddenly, a knock at the door disrupts your thoughts. Visitors at this hour are rare. Wiping your hands on a rag, you approach the door, curiosity piqued. + +Opening it, you find no one. Instead, your eyes are drawn to a sealed envelope on the ground. You pick it up and read: + +_"Dear friend,_ + +_I'm sending you this letter to aid your endeavors with the automaton. It's crucial you continue this work. Enclosed is a key to the library. Meet me there at 3 PM today._ + +_Yours,_ + +_Charles Babbage."_ + +### Off to the library + +Charles Babbage, the great mathematician and inventor of the difference engine, wants to meet you. Quickly, you grab your coat and head out the door. + +After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open. + +It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls. + +**You:** "Hello? Mr. Babbage?" + +As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage. + +
+ Dusty Library +
+ +### What's this device? + +Just as you step closer, a blinding flash erupts, and he vanishes. + +Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it. + +It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy. + +Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you. + +Then, blackness, and a sense of falling. + +
+ Time Vortex +
+ +### Alexandria 300 BC + +You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive. + +People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares. + +
+ Alexandria 300 BC +
+ +**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged. + +Am I stuck in the past? Do I dare press that button again? Before you can decide, a figure approaches you, waving. + +### Meeting Dinocrates + +An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow. + +
+ Dinocrates wearing a toga +
+ +**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold." + +**You:** It was? I mean, of course, it was. I'm here to help, I think. + +**Dinocrates:** Yes, as I was saying, you've been expected for some time now. We have a task that requires your unique skills. + +**Dinocrates:** "Our ships struggle to navigate the coast—we must build a lighthouse. Do you know anything about them?" + +**You:** "I'm a mechanic. I build automatons. Let me see what I can do." + +### The "Time Beetle" + +A thought strikes you. Can the device understand me if I speak to it? + +**You:** "Device, can you understand me?" + +**Device:** "Of course. What do you need?" + +**You:** "Can you help me build a lighthouse?" + +**Device:** "Certainly. That won’t be a problem." + +**You:** "Do you have a name?" + +**Device:** "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle." + +**You:** You're right, George is a good name, it was my father's name in fact. + +
+ Time travel device resembling a metallic beetle +
+ +_Time device, “George” the metallic beetle_ + +> [!NOTE] +> In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub. +> +> Alexandria was known for its impressive structures, including the Pharos (lighthouse), one of the Seven Wonders of the Ancient World, and the legendary Library of Alexandria. The city’s strategic location made it a key center for trade and knowledge exchange. +> +> Under the Ptolemaic Kingdom, which followed Alexander’s death, Alexandria grew into one of the most prosperous and influential cities of its time. + +## Interact with Dinocrates + +If you want to interact with Dinocrates, run the [Characters](/app/README.md) app. + +> [!IMPORTANT] +> This is entirely fictional; the responses are generated by AI. +> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) + +
+ Dinocrates wearing a toga +
+ +**Steps**: + +1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Navigate to _/app_ in the repo root. +3. Locate the console and run `npm install` followed by `npm start`. +4. Once it appears, select the "Open in Browser" button. +5. Chat with Dinocrates. + +> [!NOTE] + > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. + +### Code sneak peek + +While there is still a lot more to cover in this Generative AI curriculum, let's take a quick peek at the AI code to begin learning about using JavaScript with AI. + +Inside of `/app/app.js` you'll find an `app.post`function that handles the Generative AI functionality. It's shown next: + +```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 }); + } +}); +``` + +Here's a step-by-step summary of what the function does: + +1. **Extract Message from Request**: The function extracts the message from the request body (req.body). +2. **Create Prompt Array**: It constructs an array of messages, including a system message and the user's prompt message. +3. **Initialize OpenAI Client**: An OpenAI client is initialized with the base URL and API key from environment variables. A _gpt-4o-mini_ model from [GitHub Models](https://github.com/marketplace/models) is used to process the prompt and return a response. +4. **Send Prompt to OpenAI**: The function logs the prompt and sends it to the OpenAI API to generate a completion. +5. **Handle Response**: If successful, the function responds with the prompt and the completion's answer. +6. **Error Handling**: If an error occurs, it responds with a 500 status and the error message. + +> **Note**: [GitHub Copilot](https://github.com/features/copilot) was used to generate this code summary. Generative AI in action! + +### What can Generative AI do for me and my Apps? + +> [!NOTE] +> You've probably figured out by now that the time beetle works like an AI assistant that you can interact with using natural language, written or spoken. + +As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you. + +**You:** Tell me more about lighthouses, you say to your device. + +**Time Beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor. + +Dinocrates overhears your conversation and adds: + +**Dinocrates:** We need a lighthouse to guide our ships safely into the harbor. The seas can be treacherous, and many ships have been lost to the rocks. We need a beacon of light to guide them home. + +#### Generative AI application areas + +**You:** Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps? + +**Time Beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples: + +- **Chatbot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience. + +- **Assistants and Agents** Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously. + +- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale. + +- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks. + +- **Translation** – Translate text between languages with high accuracy. + +As you can see, these improvements can both help the front office and the back office of your app and company. + +Here's an example of a "chatbot application" in action: + +![Image of chat app](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) + +**You:** Fascinating, I'll make a note of going to the 21st century to see how these tools are used. + +### Generative AI and the JavaScript ecosystem + +**Time Beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following: + +| What | Description | +|---|---| +| The programming language itself | Including its syntax and features. | +| Libraries and frameworks | Available libraries to interact with the generative AI models. | +| Community supporting the language| Community matters, especially when trying to learn something new. The community around libraries and frameworks helps decide what libraries to use. It also affects how easy it is to find help when you're stuck. | + +**You:** Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage? + +**Time Beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age. + +**You:** Were? What do you mean were? I just got a letter from Charles Babbage. + +**Time Beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can. + +### JavaScript ecosystem + +**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems? + +**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular: + +| What | Description | +|-|-| +| Potential for full-stack development | JavaScript is one of the few languages that can be used for both front-end and back-end development. | +| Rich library ecosystem | JavaScript has a vast library ecosystem, with frameworks like React, Angular, Vue, and more. There's NPM, the package manager, which is one of the largest package repositories in the world. | +| Strong community support | JavaScript has a large and active community, with many resources available for learning and development. It also just works in the browser, which is a huge advantage. | +| IDEs and tools | JavaScript has a variety of IDEs available, such as Visual Studio Code, WebStorm, and Atom. These IDEs have extensions built by companies and the community helping you with various aspects of development. | +| AI and JavaScript | JavaScript supports AI development with libraries like TensorFlow.js, Brain.js, OpenAI’s APIs, and more enabling developers to integrate machine learning and Generative AI into web and server-side applications. | + +**You:** That's a lot of reasons, sounds like I should bet on JavaScript for my future projects. + +**Time Beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development. + +**You:** Python, what do snakes have to do with programming? + +**Time Beetle:** Let's save that for another time, shall we? + +**Time Beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and 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/) with many preferring [TypeScript](https://www.typescriptlang.org) for new projects. + +## Assignment – Helping Dinocrates + +To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented. + +**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates. + +**Time Beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria. + +**You:** Ok, tell me more about LLMs. + +**Time Beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant. + +**Time Beetle:** You probably want to ask me in a better way, so I can give you a better answer, about you know *cough* *cough* Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc. + +**You:** Got it, add more context to the prompt and then ask you. + +**Time Beetle:** Yes, I'm waiting... + +Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), or another online chatbot tool to generate a plan for building the lighthouse in Alexandria. + +> [!TIP] +> Try to have the LLM generate a plan that includes step-by-step instructions for building the lighthouse. Need help? Check out the solution for guidance. + +## Solution + +[Solution](./solution/solution.md) + +### Knowledge check + +**Question:** Which of the following statements about Generative AI and JavaScript are true? + +A. JavaScript powered Generative AI apps can only generate text. +B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more. +C. Python is the only language used for AI development. + +[Quiz solution](./solution/solution-quiz.md) + +## Self-Study resources + +- [Generative AI JavaScript video series](https://aka.ms/genai-js) From a5bc280f035879e1640c16f4b3f87c3af96627b9 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Wed, 23 Apr 2025 14:29:48 +0200 Subject: [PATCH 02/22] fix: update the Italian translation draft for Lesson 1 --- .../translations/README.it-it.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it-it.md b/lessons/01-intro-to-genai/translations/README.it-it.md index 883716c4..37d2257d 100644 --- a/lessons/01-intro-to-genai/translations/README.it-it.md +++ b/lessons/01-intro-to-genai/translations/README.it-it.md @@ -48,34 +48,34 @@ Il tuo banco da lavoro, il cuore della tua officina, è un disordine organizzato _Al centro del banco si trova il torso di un robot, una meraviglia dell’ingegneria che ha richiesto mesi di sforzi. La sua struttura in legno è intricata e ogni giuntura è stata meticolosamente progettata per garantire un movimento fluido._ -### A letter, for you? +### Una lettera, per te? -Suddenly, a knock at the door disrupts your thoughts. Visitors at this hour are rare. Wiping your hands on a rag, you approach the door, curiosity piqued. +Improvvisamente, un colpo alla porta interrompe i tuoi pensieri. I visitatori a quest’ora sono rari. Asciugandoti le mani su uno straccio, ti avvicini alla porta, incuriosito. -Opening it, you find no one. Instead, your eyes are drawn to a sealed envelope on the ground. You pick it up and read: +Aprendola, non trovi nessuno. Invece, i tuoi occhi sono attratti da una busta sigillata a terra. La raccogli e leggi: -_"Dear friend,_ +_"Caro amico,_ -_I'm sending you this letter to aid your endeavors with the automaton. It's crucial you continue this work. Enclosed is a key to the library. Meet me there at 3 PM today._ +_ti invio questa lettera per aiutarti nei tuoi sforzi con l’automa. È fondamentale che continui questo lavoro. In allegato c’è la chiave della biblioteca. Incontriamoci lì oggi alle 15:00._ -_Yours,_ +_Tuo,_ _Charles Babbage."_ -### Off to the library +### In biblioteca -Charles Babbage, the great mathematician and inventor of the difference engine, wants to meet you. Quickly, you grab your coat and head out the door. +Charles Babbage, il grande matematico e inventore della macchina differenziale, vuole conoscerti. In fretta, prendi il cappotto ed esci dalla porta. -After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open. +Dopo una camminata di venti minuti lungo il Tamigi, finalmente arrivi alla biblioteca dove trovi la porta leggermente aperta. -It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls. +L’interno è buio e tetro, l’unica luce filtra dalle finestre sudice e proietta ombre inquietanti sulle pareti. -**You:** "Hello? Mr. Babbage?" +**Tu:** "Permesso? Signor Babbage?" -As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage. +Quando gli occhi si adattano alla luce fioca, noti una figura in lontananza che ti saluta. Cammini verso di lui, i tuoi passi risuonano sul pavimento di legno. La figura diventa più chiara e la riconosci dalle foto dei giornali: è Charles Babbage.
- Dusty Library + Libreria Polverosa
### What's this device? From 8a2c18ead77b4de5b878301f0fa482517aa1e0e8 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Wed, 23 Apr 2025 18:50:37 +0200 Subject: [PATCH 03/22] fix: rename 'README.it-it.md' to 'README.it.md' --- .../{README.it-it.md => README.it.md} | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) rename lessons/01-intro-to-genai/translations/{README.it-it.md => README.it.md} (84%) diff --git a/lessons/01-intro-to-genai/translations/README.it-it.md b/lessons/01-intro-to-genai/translations/README.it.md similarity index 84% rename from lessons/01-intro-to-genai/translations/README.it-it.md rename to lessons/01-intro-to-genai/translations/README.it.md index 37d2257d..eff88d09 100644 --- a/lessons/01-intro-to-genai/translations/README.it-it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -70,85 +70,85 @@ Dopo una camminata di venti minuti lungo il Tamigi, finalmente arrivi alla bibli L’interno è buio e tetro, l’unica luce filtra dalle finestre sudice e proietta ombre inquietanti sulle pareti. -**Tu:** "Permesso? Signor Babbage?" +**Tu:** «Permesso? Signor Babbage?» Quando gli occhi si adattano alla luce fioca, noti una figura in lontananza che ti saluta. Cammini verso di lui, i tuoi passi risuonano sul pavimento di legno. La figura diventa più chiara e la riconosci dalle foto dei giornali: è Charles Babbage.
- Libreria Polverosa + Libreria polverosa
-### What's this device? +### Che cos’è questo dispositivo? -Just as you step closer, a blinding flash erupts, and he vanishes. +Nel momento in cui ti avvicini, scoppia un lampo accecante e lui scompare. -Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it. +Si lascia dietro di sé un piccolo dispositivo metallico che gira sul pavimento. Lo raccogli, la sua superficie liscia e fredda ronza dolcemente. È diverso da qualsiasi cosa tu abbia mai visto eppure stranamente familiare, avverti un senso di potere che emana da esso. -It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy. +Assomiglia a un piccolo scarabeo, dal design intricato, con tre pulsanti: una freccia verso l’alto, una freccia verso il basso e un pulsante rosso incandescente. Dalla schiena si estende una piccola antenna che pulsa di energia. -Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you. +Spinto dalla curiosità, dirigi le dita verso il pulsante rosso. Nel momento in cui lo premi, il mondo intorno a te brilla e i colori turbinano violentemente tutto intorno. -Then, blackness, and a sense of falling. +Poi, il buio e la sensazione di cadere.
- Time Vortex + Vortice temporale
-### Alexandria 300 BC +### Alessandria, 300 a.C. -You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive. +Ti svegli disorientato. Quando la vista si schiarisce, un’antica città si dispiega davanti a te: vivace, vibrante e viva. -People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares. +Persone in toga si muovono per le strade, le loro voci si fondono in una sinfonia di antichi dialetti, l’aria si riempie del profumo di spezie esotiche e del suono lontano dei mercanti che vendono le loro merci.
- Alexandria 300 BC + Alessandria, 300 a.C.
-**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged. +**Tu:** «Sicuramente avrò sbattuto la testa», pensi, chiudendo gli occhi e riaprendoli, ma la scena rimane invariata. -Am I stuck in the past? Do I dare press that button again? Before you can decide, a figure approaches you, waving. +«Sono forse bloccato nel passato? Avrò il coraggio di premere di nuovo quel pulsante?» Prima che tu possa decidere, una figura ti si avvicina, salutandoti. -### Meeting Dinocrates +### L’incontro con Dinocrate -An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow. +Un anziano signore in toga ti saluta dai gradini del grande tempio. I suoi capelli e la sua barba bianchi catturano la luce del sole, conferendogli un bagliore quasi etereo.
- Dinocrates wearing a toga + Dinocrate che indossa una toga
-**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold." +**Dinocrate:** «Benvenuto, viaggiatore,» he says warmly. «Sono Dinocrate, l’architetto di questa grande città. Il tuo arrivo è stato predetto.» -**You:** It was? I mean, of course, it was. I'm here to help, I think. +**Tu:** «Davvero? Voglio dire, di certo lo è stato. Sono qui per aiutare, credo.» -**Dinocrates:** Yes, as I was saying, you've been expected for some time now. We have a task that requires your unique skills. +**Dinocrate:** «Sì, come dicevo, ti si aspettava da tempo. Abbiamo un compito che richiede le tue abilità uniche.» -**Dinocrates:** "Our ships struggle to navigate the coast—we must build a lighthouse. Do you know anything about them?" +**Dinocrate:** «Le nostre navi faticano a navigare lungo la costa: dobbiamo costruire un faro. Ne sai qualcosa?» -**You:** "I'm a mechanic. I build automatons. Let me see what I can do." +**Tu:** «Sono un meccanico. Costruisco automi. Vediamo che cosa posso fare.» -### The "Time Beetle" +### Lo “Scarabeo del Tempo” -A thought strikes you. Can the device understand me if I speak to it? +Un pensiero ti assale. «Il dispositivo può capirmi se gli parlo?» -**You:** "Device, can you understand me?" +**Tu:** «Dispositivo, puoi capirmi?» -**Device:** "Of course. What do you need?" +**Dispositivo:** «Certo. Di che cosa hai bisogno?» -**You:** "Can you help me build a lighthouse?" +**Tu:** «Puoi aiutarmi a costruire un faro?» -**Device:** "Certainly. That won’t be a problem." +**Dispositivo:** «Certamente. Non sarà un problema.» -**You:** "Do you have a name?" +**Tu:** «Do you have a name?» -**Device:** "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle." +**Dispositivo:** «Io sono lo Scarabeo del Tempo. Il mio creatore mi chiama George; dice che è un bel nome per uno scarabeo.» -**You:** You're right, George is a good name, it was my father's name in fact. +**Tu:** «Hai ragione, George è un bel nome, infatti era il nome di mio padre.»
- Time travel device resembling a metallic beetle + Dispositivo per viaggiare nel tempo che somiglia a uno scarabeo metallico
-_Time device, “George” the metallic beetle_ +_Macchina del tempo, “George” lo scarabeo metallico_ > [!NOTE] > In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub. From 3201089c67372e0a6748262f89ffdc8477a0434e Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 25 Apr 2025 16:56:30 +0200 Subject: [PATCH 04/22] fix: update the Italian translation draft for Lesson 1 --- .../translations/README.it.md | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index eff88d09..65292c48 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -28,10 +28,10 @@ Inoltre, la IA Generativa si è evoluta in capacità multimodali, permettendoti ## Narrazione: Un viaggio nel tempo -> [!NOTA] +> [!NOTE] > Iniziamo con una panoramica della storia: una storia che collega il passato e il futuro! Procedendo in questo curriculum, ti imbarcherai in un’avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle più grandi menti della storia. Insieme, affronterete sfide ed esplorerete come l’IA Generativa può rivoluzionare le tue applicazioni JavaScript._ -> [!NOTA] +> [!NOTE] > Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interact-with-dinocrates) se preferisci saltare direttamente al contenuto tecnico. Il tuo viaggio inizia nella Londra del 1860, dove assumerai il ruolo di un abile meccanico. Attraverso una serie di avvincenti avventure, affinerai le tue abilità in IA e sbloccherai soluzioni che trascendono il tempo. @@ -54,13 +54,13 @@ Improvvisamente, un colpo alla porta interrompe i tuoi pensieri. I visitatori a Aprendola, non trovi nessuno. Invece, i tuoi occhi sono attratti da una busta sigillata a terra. La raccogli e leggi: -_"Caro amico,_ +_“Caro amico,_ _ti invio questa lettera per aiutarti nei tuoi sforzi con l’automa. È fondamentale che continui questo lavoro. In allegato c’è la chiave della biblioteca. Incontriamoci lì oggi alle 15:00._ _Tuo,_ -_Charles Babbage."_ +_Charles Babbage.”_ ### In biblioteca @@ -116,9 +116,9 @@ Un anziano signore in toga ti saluta dai gradini del grande tempio. I suoi capel Dinocrate che indossa una toga -**Dinocrate:** «Benvenuto, viaggiatore,» he says warmly. «Sono Dinocrate, l’architetto di questa grande città. Il tuo arrivo è stato predetto.» +**Dinocrate:** «Benvenuto, viaggiatore,» dice calorosamente. «Sono Dinocrate, l’architetto di questa grande città. Il tuo arrivo è stato predetto.» -**Tu:** «Davvero? Voglio dire, di certo lo è stato. Sono qui per aiutare, credo.» +**Tu:** «Davvero? Voglio dire, certo lo è stato. Sono qui per aiutare, credo.» **Dinocrate:** «Sì, come dicevo, ti si aspettava da tempo. Abbiamo un compito che richiede le tue abilità uniche.» @@ -151,40 +151,40 @@ Un pensiero ti assale. «Il dispositivo può capirmi se gli parlo?» _Macchina del tempo, “George” lo scarabeo metallico_ > [!NOTE] -> In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub. +> Nel 300 a.C., Alessandria era una fiorente città fondata da Alessandro Magno nel 331 a.C. Divenne rapidamente una delle più grandi città del mondo ellenistico. Progettata dal capo architetto di Alessandro, Dinocrate, divenne un importante porto e centro culturale. > -> Alexandria was known for its impressive structures, including the Pharos (lighthouse), one of the Seven Wonders of the Ancient World, and the legendary Library of Alexandria. The city’s strategic location made it a key center for trade and knowledge exchange. +> Alessandria era nota per le sue imponenti strutture, tra cui il Pharos (faro), una delle sette meraviglie del mondo antico, e la leggendaria Biblioteca di Alessandria. La posizione strategica della città la rendeva un centro chiave per il commercio e lo scambio di conoscenze. > -> Under the Ptolemaic Kingdom, which followed Alexander’s death, Alexandria grew into one of the most prosperous and influential cities of its time. +> Sotto il regno tolemaico, che seguì la morte di Alessandro, Alessandria divenne una delle città più prospere e influenti del suo tempo. -## Interact with Dinocrates +## Interazione con Dinocrate -If you want to interact with Dinocrates, run the [Characters](/app/README.md) app. +Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). > [!IMPORTANT] -> This is entirely fictional; the responses are generated by AI. -> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) +> Questo è del tutto fittizio; le risposte sono generate dall’IA. +> [Disclaimer AI responsabile](../../README.md#responsible-ai-disclaimer)
- Dinocrates wearing a toga + Dinocrate che indossa una toga
-**Steps**: +**Passaggi**: -1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) -2. Navigate to _/app_ in the repo root. -3. Locate the console and run `npm install` followed by `npm start`. -4. Once it appears, select the "Open in Browser" button. -5. Chat with Dinocrates. +1. Inizia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Naviga in _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Appena compare, seleziona il pulsante “Apri nel Browser”. +5. Chatta con Dinocrate. > [!NOTE] - > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. + > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere un token di [accesso personale a GitHub](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituire la chiave nel codice. -### Code sneak peek +### Codice in anteprima -While there is still a lot more to cover in this Generative AI curriculum, let's take a quick peek at the AI code to begin learning about using JavaScript with AI. +Anche se c’è ancora molto da dire in questo curriculum sull’IA Generativa, diamo una rapida occhiata al codice dell’IA per iniziare a imparare a usare JavaScript con l’IA. -Inside of `/app/app.js` you'll find an `app.post`function that handles the Generative AI functionality. It's shown next: +All’interno di `/app/app.js` troverai una funzione `app.post` che gestisce la funzionalità di IA Generativa. È mostrata di seguito: ```JavaScript app.post('/send', async (req, res) => { @@ -224,16 +224,16 @@ app.post('/send', async (req, res) => { }); ``` -Here's a step-by-step summary of what the function does: +Ecco un riepilogo passo-passo di ciò che fa la funzione: -1. **Extract Message from Request**: The function extracts the message from the request body (req.body). -2. **Create Prompt Array**: It constructs an array of messages, including a system message and the user's prompt message. -3. **Initialize OpenAI Client**: An OpenAI client is initialized with the base URL and API key from environment variables. A _gpt-4o-mini_ model from [GitHub Models](https://github.com/marketplace/models) is used to process the prompt and return a response. -4. **Send Prompt to OpenAI**: The function logs the prompt and sends it to the OpenAI API to generate a completion. -5. **Handle Response**: If successful, the function responds with the prompt and the completion's answer. -6. **Error Handling**: If an error occurs, it responds with a 500 status and the error message. +1. **Estrazione del messaggio dalla richiesta**: La funzione estrae il messaggio dal corpo della richiesta (req.body). +2. **Creazione dell’array del prompt**: Costruisce un array di messaggi, includendo il messaggio di sistema e il messaggio del prompt dell’utente. +3. **Inizializzazione del client di OpenAI**: Un client è inizializzato con l’URL di base e la chiave API recuperata dalle variabili d’ambiente. Un modello _gpt-4o-mini_ da [GitHub Models](https://github.com/marketplace/models) è utilizzato per processare il prompt e restituire una risposta. +4. **Invio del prompt a OpenAI**: La funzione logga il prompt e lo invia alle API di OpenAI per generare un completamento. +5. **Gestione della risposta**: In caso di successo, la funzione risponde con il prompt e la risposta del completamento. +6. **Gestione dell’errore**: Se si verifica un errore, risponde con lo stato 500 e il messaggio di errore. -> **Note**: [GitHub Copilot](https://github.com/features/copilot) was used to generate this code summary. Generative AI in action! +> **Nota**: [GitHub Copilot](https://github.com/features/copilot) è stato usato per generare questo riassunto del codice. IA Generativa in azione! ### What can Generative AI do for me and my Apps? From ac645bbe81afd06fa571488a9d705eb3e7ba7400 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 25 Apr 2025 17:39:42 +0200 Subject: [PATCH 05/22] fix: update the Italian translation draft for Lesson 1 --- .../translations/README.it.md | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 65292c48..84acc2ad 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -174,7 +174,7 @@ Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). 1. Inizia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) 2. Naviga in _/app_ nella root del repo. 3. Individua la console ed esegui `npm install` seguito da `npm start`. -4. Appena compare, seleziona il pulsante “Apri nel Browser”. +4. Appena compare, seleziona il pulsante “Open in Browser”. 5. Chatta con Dinocrate. > [!NOTE] @@ -235,44 +235,44 @@ Ecco un riepilogo passo-passo di ciò che fa la funzione: > **Nota**: [GitHub Copilot](https://github.com/features/copilot) è stato usato per generare questo riassunto del codice. IA Generativa in azione! -### What can Generative AI do for me and my Apps? +### Che cosa può fare la IA Generativa per me e le mie app? > [!NOTE] -> You've probably figured out by now that the time beetle works like an AI assistant that you can interact with using natural language, written or spoken. +> Probabilmente avrai già capito che lo Scarabeo del Tempo funziona come un assistente IA con cui si può interagire utilizzando il linguaggio naturale, scritto o parlato. -As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you. +Nel corso della tua avventura ad Alessandria, inizierai a vedere le possibilità di combinare creatività, ingegno e strumenti all’avanguardia per risolvere le sfide e trasformare il mondo che ti circonda. -**You:** Tell me more about lighthouses, you say to your device. +**Tu:** «Dimmi di più sui fari», dici al tuo dispositivo. -**Time Beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor. +**Scarabeo del Tempo:** «Un faro è una torre dotata di una luce brillante sulla sommità, situata vicino alla costa per guidare le navi in mare. La luce serve come aiuto alla navigazione, aiutando i marinai a evitare scogli e rocce pericolose e a raggiungere in sicurezza il porto.» -Dinocrates overhears your conversation and adds: +Dinocrate ascolta la vostra conversazione e aggiunge: -**Dinocrates:** We need a lighthouse to guide our ships safely into the harbor. The seas can be treacherous, and many ships have been lost to the rocks. We need a beacon of light to guide them home. +**Dinocrate:** «Abbiamo bisogno di un faro per guidare le nostre navi al sicuro nel porto. I mari possono essere insidiosi e molte navi sono andate perse sugli scogli. Abbiamo bisogno di un faro che le guidi a casa.» -#### Generative AI application areas +#### Aree di applicazione della IA Generativa -**You:** Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps? +**Tu:** «I fari sembrano sicuramente un’area interessante, cos’altro può fare l’IA Generativa per me e le mie app?» -**Time Beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples: +**Scarabeo del Tempo:** «Nel XXI secolo, l’IA Generativa ha rivoluzionato molti settori, dalla sanità alla finanza all’intrattenimento, ecco alcuni esempi: -- **Chatbot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience. +- **Chatbot**: Un chatbot che può generare in grado di generare risposte simili a quelle umane alle domande degli utenti. Invece di una pagina di FAQ statica, gli utenti possono interagire con un chatbot che fornisce risposte dinamiche. Questo rende l’esperienza dell’utente più coinvolgente e meno frustrante. -- **Assistants and Agents** Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously. +- **Assistenti e agenti** Gli assistenti e gli agenti possono eseguire istruzioni più avanzate, come sfruttare gli strumenti per chiamare le API, eseguire codice, generare immagini e altro ancora. Gli agenti avanzati possono raggiungere obiettivi e svolgere attività in modo autonomo. -- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale. +- **Uno strumento per la creazione di contenuti**: Uno strumento per generare post per blog e social media. Immaginate di creare campagne in pochi minuti invece che in ore, quando un sito di e-commerce ha una vendita del Black Friday. -- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks. +- **Completamento del codice**: Uno strumento di completamento del codice in grado di generare snippet di codice in base all’input dell’utente. Questo può essere un enorme risparmio di tempo per gli sviluppatori, soprattutto quando lavorano a compiti ripetitivi. -- **Translation** – Translate text between languages with high accuracy. +- **Traduzione** – Tradurre il testo tra le lingue con grande precisione. -As you can see, these improvements can both help the front office and the back office of your app and company. +Come puoi vedere, questi miglioramenti possono aiutare sia il front office che il back office della tua app e della tua azienda. -Here's an example of a "chatbot application" in action: +Ecco un esempio di “applicazione chatbot” in azione:.» -![Image of chat app](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) +![Immagine di una app di chat](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) -**You:** Fascinating, I'll make a note of going to the 21st century to see how these tools are used. +**Tu:** «Affascinante, prenderò nota di andare nel XXI secolo per vedere come vengono utilizzati questi strumenti.» ### Generative AI and the JavaScript ecosystem From 28b7233287b1241d5afb0e749f3b11e2550480d5 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 25 Apr 2025 17:55:05 +0200 Subject: [PATCH 06/22] fix: update the Italian translation draft for Lesson 1 --- .../translations/README.it.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 84acc2ad..ec972d77 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -274,25 +274,25 @@ Ecco un esempio di “applicazione chatbot” in azione:.» **Tu:** «Affascinante, prenderò nota di andare nel XXI secolo per vedere come vengono utilizzati questi strumenti.» -### Generative AI and the JavaScript ecosystem +### IA Generativa ed ecosistema JavaScript -**Time Beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following: +**Scarabeo del Tempo:** «Un modo popolare di costruire applicazioni nel XXI secolo è l’uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema. Questo ecosistema comprende il linguaggio di programmazione stesso, le librerie e i framework, il supporto della comunità, gli IDE e gli strumenti. Nell’ecosistema di un linguaggio di programmazione, di solito si parla di quanto segue:» -| What | Description | -|---|---| -| The programming language itself | Including its syntax and features. | -| Libraries and frameworks | Available libraries to interact with the generative AI models. | -| Community supporting the language| Community matters, especially when trying to learn something new. The community around libraries and frameworks helps decide what libraries to use. It also affects how easy it is to find help when you're stuck. | +| Che cosa | Descrizione | +|---|---| +| Il linguaggio di programmazione in sé | Comprese la sua sintassi e le sue funzionalità. | +| Librerie e framework | Librerie disponibili per interagire con i modelli di IA Generativa. | +| Comunità che sostiene il linguaggio | La comunità è importante, soprattutto quando si cerca di imparare qualcosa di nuovo. La comunità intorno alle librerie e ai framework aiuta a decidere quali librerie usare. Inoltre, influisce sulla facilità di trovare aiuto quando si è bloccati. | -**You:** Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage? +**Tu:** «Interessante, ho sentito parlare di programmazione, non è forse qualcosa che hanno sperimentato Ada Lovelace e Charles Babbage?» -**Time Beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age. +**Scarabeo del Tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l’inventore del motore differenziale, un computer meccanico. Sono stati pionieri nel campo dell’informatica, gettando le basi per l’era digitale.» -**You:** Were? What do you mean were? I just got a letter from Charles Babbage. +**Tu:** «Sono stati? Cosa vuol dire “sono stati”? Ho appena ricevuto una lettera da Charles Babbage.» -**Time Beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can. +**Scarabeo del Tempo:** «Diciamo che sei in una posizione unica per interagire con i personaggi storici in un modo che pochi altri possono fare.» -### JavaScript ecosystem +### Ecosistema JavaScript **You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems? From aab682e33bab318ed769bae746eefcbf6956e197 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 25 Apr 2025 18:28:11 +0200 Subject: [PATCH 07/22] fix: complete the Italian translation draft for Lesson 1 --- .../translations/README.it.md | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index ec972d77..1af34b74 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -279,7 +279,7 @@ Ecco un esempio di “applicazione chatbot” in azione:.» **Scarabeo del Tempo:** «Un modo popolare di costruire applicazioni nel XXI secolo è l’uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema. Questo ecosistema comprende il linguaggio di programmazione stesso, le librerie e i framework, il supporto della comunità, gli IDE e gli strumenti. Nell’ecosistema di un linguaggio di programmazione, di solito si parla di quanto segue:» | Che cosa | Descrizione | -|---|---| +| --- | --- | | Il linguaggio di programmazione in sé | Comprese la sua sintassi e le sue funzionalità. | | Librerie e framework | Librerie disponibili per interagire con i modelli di IA Generativa. | | Comunità che sostiene il linguaggio | La comunità è importante, soprattutto quando si cerca di imparare qualcosa di nuovo. La comunità intorno alle librerie e ai framework aiuta a decidere quali librerie usare. Inoltre, influisce sulla facilità di trovare aiuto quando si è bloccati. | @@ -294,68 +294,68 @@ Ecco un esempio di “applicazione chatbot” in azione:.» ### Ecosistema JavaScript -**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems? +**Tu:** «Quindi, ecosistemi hai detto, sto solo prendendo appunti, che cosa c’è riguardo a JavaScript e in che modo è diverso dagli altri ecosistemi?» -**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular: +**Scarabeo del Tempo:** «JavaScript è uno dei linguaggi di programmazione più popolari nel mondo nel XXI secolo. Ecco alcune ragioni per cui è così popolare:» -| What | Description | -|-|-| -| Potential for full-stack development | JavaScript is one of the few languages that can be used for both front-end and back-end development. | -| Rich library ecosystem | JavaScript has a vast library ecosystem, with frameworks like React, Angular, Vue, and more. There's NPM, the package manager, which is one of the largest package repositories in the world. | -| Strong community support | JavaScript has a large and active community, with many resources available for learning and development. It also just works in the browser, which is a huge advantage. | -| IDEs and tools | JavaScript has a variety of IDEs available, such as Visual Studio Code, WebStorm, and Atom. These IDEs have extensions built by companies and the community helping you with various aspects of development. | -| AI and JavaScript | JavaScript supports AI development with libraries like TensorFlow.js, Brain.js, OpenAI’s APIs, and more enabling developers to integrate machine learning and Generative AI into web and server-side applications. | +| Che cosa | Descrizione | +| --- | --- | +| Potenziale di sviluppo full-stack | JavaScript è uno dei pochi linguaggi che può essere utilizzato sia per lo sviluppo front-end che per quello back-end. | +| Ricco ecosistema di librerie | JavaScript ha un vasto ecosistema di librerie, con framework come React, Angular, Vue e altri ancora. C’è NPM, il gestore di pacchetti, che è uno dei più grandi repository di pacchetti al mondo. | +| Forte sostegno della comunità | JavaScript ha una comunità ampia e attiva, con molte risorse disponibili per l’apprendimento e lo sviluppo. Inoltre, funziona semplicemente nel browser, il che è un enorme vantaggio. | +| IDE e strumenti | Per JavaScript sono disponibili diversi IDE, come Visual Studio Code, WebStorm e Atom. Questi IDE hanno estensioni costruite da aziende e dalla comunità che aiutano l’utente in vari aspetti dello sviluppo. | +| IA e JavaScript | JavaScript supporta lo sviluppo dell’IA con librerie come TensorFlow.js, Brain.js, le API di OpenAI e altre che consentono agli sviluppatori di integrare l’apprendimento automatico e l’IA Generativa nelle applicazioni web e lato server. | -**You:** That's a lot of reasons, sounds like I should bet on JavaScript for my future projects. +**Tu:** «Sono molte ragioni, sembra che dovrei puntare su JavaScript per i miei progetti futuri.» -**Time Beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development. +**Scarabeo del Tempo:** «In effetti, JavaScript è un linguaggio versatile e anche Python è un linguaggio popolare per lo sviluppo dell’intelligenza artificiale.» -**You:** Python, what do snakes have to do with programming? +**Tu:** «Python, che cosa c’entrano i serpenti con la programmazione?» -**Time Beetle:** Let's save that for another time, shall we? +**Scarabeo del Tempo:** «Teniamo questo argomento per un’altra volta, che ne dici?» -**Time Beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript. +**Scarabeo del Tempo:** «In precedenza ho spiegato perché JavaScript e il suo ecosistema sono adatti in generale, ma perché in particolare per l’IA Generativa? La risposta è che si tratta di un linguaggio supportato da molti fornitori di cloud e di framework e strumenti di IA. Si ritiene inoltre che, anche se Python potrebbe essere il più utilizzato per gli scenari di IA, molti sviluppatori utilizzano JavaScript e 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/) with many preferring [TypeScript](https://www.typescriptlang.org) for new projects. +> **Lo sapevi?** +> [Il 62.5% degli sviluppatori dice di stare usando JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) con molti che preferiscono [TypeScript](https://www.typescriptlang.org) per i nuovi progetti. -## Assignment – Helping Dinocrates +## Compito – Aiutare Democrate -To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented. +Per usare un Large Language Model (LLM) per aiutare Dinocrate con il faro di cui abbiamo parlato prima nella nostra storia, useremo qualcosa chiamato prompt, una frase per descrivere ciò che si vuole. È possibile specificare sia le informazioni di cui si ha bisogno sia il modo in cui si desidera che vengano presentate. -**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates. +**Scarabeo del Tempo:** «Cominciamo, usiamo un LLM per ricercare come costruire un faro per aiutare Dinocrate.» -**Time Beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria. +**Scarabeo del Tempo:**: «Devi fornire al LLM (cioè a “me”) un contesto su come costruire, con quali strumenti e quali risorse dovrebbero essere disponibili ai tempi di Alessandria.» -**You:** Ok, tell me more about LLMs. +**Tu:** «Ok, dimmi di più sugli LLM.» -**Time Beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant. +**Scarabeo del Tempo:** «Gli LLM sono un tipo di modello di intelligenza artificiale in grado di generare un testo simile a quello umano sulla base di una richiesta data. Sono addestrati su vaste quantità di dati e possono generare testi coerenti, creativi e contestualmente rilevanti.» -**Time Beetle:** You probably want to ask me in a better way, so I can give you a better answer, about you know *cough* *cough* Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc. +**Scarabeo del Tempo:** «Probabilmente dovresti chiedermelo in un modo migliore, in modo che possa darti una risposta migliore, riguardo a *coff* *coff* Case luminose, Alessandria, 300 a.C., Dinocrate, Faro di Alessandria, ecc.» -**You:** Got it, add more context to the prompt and then ask you. +**Tu:** «Capito, aggiungo un ulteriore contesto alla richiesta e poi te lo chiedo.» -**Time Beetle:** Yes, I'm waiting... +**Scarabeo del Tempo:** «Sì, sto aspettando…» -Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), or another online chatbot tool to generate a plan for building the lighthouse in Alexandria. +Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), o un altro strumento di chatbot online per generare un piano per la costruzione del faro di Alessandria. > [!TIP] -> Try to have the LLM generate a plan that includes step-by-step instructions for building the lighthouse. Need help? Check out the solution for guidance. +> Cerca di far generare al LLM un piano che includa istruzioni passo-passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per avere una guida. -## Solution +## Soluzione -[Solution](./solution/solution.md) +[Soluzione](./solution/solution.md) -### Knowledge check +### Verifica delle conoscenze -**Question:** Which of the following statements about Generative AI and JavaScript are true? +**Domanda:** Quali delle seguenti affermazioni sull’IA generativa e su JavaScript sono vere? -A. JavaScript powered Generative AI apps can only generate text. -B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more. -C. Python is the only language used for AI development. +A. Le app di IA Generativa basate su JavaScript possono generare solo testo. +B. JavaScript può essere utilizzato per creare applicazioni basate sull’IA, tra cui chatbot, strumenti di generazione di testo e altro ancora. +C. Python è l’unico linguaggio utilizzato per lo sviluppo dellvIA. -[Quiz solution](./solution/solution-quiz.md) +[Soluzione del quiz](./solution/solution-quiz.md) -## Self-Study resources +## Risorse per l’autoapprendimento -- [Generative AI JavaScript video series](https://aka.ms/genai-js) +- [Serie di video JavaScript sull’IA Generativa](https://aka.ms/genai-js) From 0538fb0bacd5a3e7aaf87068e520241fcd49868f Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 26 Apr 2025 09:43:11 +0200 Subject: [PATCH 08/22] feat: add a first draft of the Italian translation for Lesson 2 --- .../02-first-ai-app/translations/README.it.md | 511 ++++++++++++++++++ 1 file changed, 511 insertions(+) create mode 100644 lessons/02-first-ai-app/translations/README.it.md diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md new file mode 100644 index 00000000..fa017749 --- /dev/null +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -0,0 +1,511 @@ +# Lesson 2: Writing your first AI app + +In this chapter you will learn: + +- Set up your development environment. +- Write a basic app. +- Understand system prompts. + +## Setup + +If you haven't already, set up your development environment. Here's how you can do it: [Setup your environment](/docs/setup/README.md). + +## Related resources + +[![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) + +_This video gives you an introduction to AI models called "large language models", LLMs, what they are and how you can use them to integrate AI into your apps._ + +*🎥 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) + +## Narrative: Picture yourself in a boat on a river + + +> [!NOTE] +> _Our story so far: You are a maker of things, a craftsman from 1860s London who has traveled through time using a mysterious device called the Time Beetle. You've journeyed through the annals of history, witnessing the creation of the lighthouse at Alexandria, a marvel of ancient engineering you helped create with a little help from Dinocrates and the Time Beetle._ +> +> See [Lesson 1](../01-intro-to-genai/README.md) if you want to catch up with the story from the beginning and get started with Generative AI. + +> [!NOTE] +> While we recommend going through the story (it's fun!), [click here](#interact-with-leonardo) if you'd prefer to jump straight to the technical content. + +Together with Dinocrates, you put the finishing touches on the lighthouse at Alexandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea. + +You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors. + +### A new adventure + +When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist. + +Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting. + +
+ Boat on the rive, man standing with a paddle +
+ +The question now is, where and when are you this time? + +You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly. + +As you walk, you notice a man with a long beard and a hat, digging through a crate of what looks like mechanical parts. His hands move deftly, sorting through gears and springs with practiced ease. + +
+ Leonardo Da Vinci standing next to a crate in the harbour +
+ +### Help me, Leonardo + +**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate. + +**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'" + +**Old man:** The old man replies, "Siete a Firenze, signore. E chi siete voi?" + +**Time Beetle:** The Time Beetle translates, "He says you're in Florence, and asks who you are." + +**You:** "Tell him I'm a maker of things, and I'm looking for a place to work." + +**Old man:** Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci? + +**Time Beetle:** The Time Beetle translates, "He asks if you've heard of Leonardo da Vinci." + +**You:** "Of course," you say. "Tell him I have and I would like to meet him." + +**Old man:** The old man smiles, "Allora, seguitemi, vi porterò da lui." + +**You:** You ask, "What did he say?" + +**Time Beetle:** The Time Beetle responds, "He said he'll take you to Leonardo." + +### At the workshop + +
+ Lenoardos workshop +
+ +The old man leads you to a large wooden door and you are greeted by the sight of a workshop filled with all sorts of mechanical contraptions. + +You ask the Time Beetle to inquire about Leonardo's whereabouts. + +**You:** "Dove è Leonardo?" + +**Old man:** The old man turns to you with a smile, "Sono io (that’s me), Leonardo da Vinci. Chi siete voi?", who are you? + +You feel a thrill of recognition. + +**You:** I thought so. I'm a fellow maker, out of place and time." + +**Leonardo:** Leonardo's eyes sparkle with curiosity. "Interessante, cosa vi porta qui?" + +The Time Beetle translates. + +**Time Beetle:** "He asks what brings you here." + +**You:** "Well, I was working on a project, and I ended up here." + +You show him the Time Beetle, and his eyes light up with fascination. He examines it closely as you explain how it works and how you ended up in Florence. + +Leonardo looks at you with excitement. + +**Leonardo:** You're a maker of things. I have a project that might interest you. I've been working on a machine that can generate text based on verbal input. Would you like to help me with it? + +Leonardo da Vinci, asking you to help him with a project—you can hardly believe it. You nod eagerly and say: + +**You:** I would be honored to help you with your project, +"Sarebbe un onore aiutarti con il tuo progetto." + +## Interact with Leonardo + +If you want to interact with Leonardo, run the [Characters](/app/README.md) app. + +> [!IMPORTANT] +> This is entirely fictional; the responses are generated by AI. +> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) + +
+ +
+ +**Steps**: + +1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Navigate to _/app/README.md_ in the repo root. +3. Locate the console and run `npm install` followed by `npm start`. +4. Once it appears, select the "Open in Browser" button. +5. Chat with Leonardo. + +For a more detailed explanation of the app, see [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] + > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. + +## Development environment setup + +Before you can assist Leonardo with his project, you should first think about the essential "tools of the trade" required to begin helping him effectively. + +**You:** "Time Beetle, what do I need to get started with this project?" Suggest tools and libraries that I need that can help me build an AI app that you're able to run. + +**Time Beetle:** I'm compatible with most machines running in the 21st century, see the following list for a set of essential tools and libraries. + +- **Text editor**, for example Visual Studio Code. +- **Terminal**, for running commands. +- **Browser for testing your app**. It's also a good idea to have a tool like curl or some other HTTP client to test your app's API endpoints. + +- **Node.js**. You also need to install Node.js and npm, which are tools that help you run JavaScript code on your computer. + +- **API key**. You'll need an API key to access the generative AI model. You can get this from the model provider, for example OpenAI or Azure OpenAI. + +**You:** Thank you, Time Beetle, I guess you'll go get those somehow from that Web you spoke about? + +**Time Beetle:** Yes, I already have those it says and projects a keyboard and screen on the wall in front of you. + +## Writing a basic app + +**You:** Tell me more about the actual writing of the app, how do I get started? + +**Time Beetle:** Of course, to write an app, at its simplest it's about sending a request to an API and displaying the response. Let's break it down: + +- **Input**: In a basic text generation app, the input refers to the initial text that you want the app to expand or build upon. This input can either be provided by the user during runtime or pre-set (hardcoded) within the app itself. For now, we’ll begin by using hardcoded text as the input. + +- **API request**: You need to send a request to the generative AI model API with the input text. This is done using the fetch function in JavaScript (Node.js). Included in this request should also be your API key. It's recommended as you consider security to not hardcode the API key in your app but rather use environment variables. Additionally, consider looking into managed identity if you're using a provider like Azure as it's considered a more secure way to access resources. With managed identity you can assign more granular permissions to your app. The best part is that the cloud provider takes care of the authentication for you. + +- **Response**: The API will return a response with the generated text. You need to extract this text from the response and display it to the user. + +**You:** That sounds simple enough, can you take me through a scenario that would make sense given the situation we're in? + +**Time Beetle:** Sure, let's see how we can build a simple app that generates Italian text based on English input. + +## Your first app - teach me Italian + +**Time Beetle:** Generative AI models can be used for many things, for example, language translation. In fact, it accepts input in one language and can generate text in another language. Let's start with a simple app that takes English input and generates Italian text. + +```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); +``` + +Let's explain what's happening here: + +- Creating the question as 'Hello, how are you?'. This is the text you want to translate to Italian. +- Creating the augmented prompt, which contains the input text and some additional instructions what to do, i.e translate. Note how we're using string interpolation to include the input text in the prompt and how that instruction is to translate the text to Italian. +- Creating the client with properties: + - `model`, what model to use. + - `messages`, the prompt to send to the model. Also note how you set the role to "user" to indicate that the input text is from the user. Had it been from the AI, you would have set the role to "system". +- Extracting the generated text from the response and printing it to the console. + +**You:** I think I get it. So if I change the value of the `question` variable to something else, the app will generate a different Italian translation? + +**Time Beetle:** Exactly, you can change the input text to anything you want. Also note how GitHub models are being used as the base URL for the API together with a GitHub token as the API key. + +**You:** Why is that important? + +**Time Beetle:** It's important to use a base URL and API key that are specific to the model you're using. GitHub Models is a platform that hosts a variety of models, all with different capabilities and features, it's also free to use. + +**You:** Oh good, I don't know who to pay anyways and I doubt they accept my currency here. :) + +## Chat apps + +**Time Beetle:** Generative AI models can also be used to generate text based on a conversation. You can simulate a conversation with the AI by providing a list of messages as context like the conversation has already happened. + +**You:** That sounds interesting, but why is that useful? + +**Time Beetle:** It's useful because it allows the AI to provide a better response based on more context than just a single prompt. Let's look at a conversation below to illustrate this: + +```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:** Imagine if a sentence like "Tell me more about it" were taken out of context, the AI wouldn't know what "it" refers to. This is where context is important, and this context is something we can provide to the AI model through the prompt. + +**You:** I think I get it, how do I construct a conversation with the AI using this JavaScript language you speak of? + +**Time Beetle:** Below is how we can construct a conversation with the 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); + +``` + +Now the AI will provide a list of chat messages as context, and the AI will generate a response based on that context. This is a more interactive way to use generative AI models and can be used in chatbots, customer service applications, and more. + +**You:** Ok, so if I understand the conversation correctly, the AI will now have the following context: _I'm going to Rome next month_, so based on that it should filter out irrelevant information and provide a more relevant response? + +**Time Beetle:** Exactly, the AI will use the context to generate a response that is more relevant to the conversation. + +## Improving the chat conversation with a system message + +**You:** I see, but is there a way to improve this further? + +**Time Beetle:** Yes, you can add a system message to the conversation. A system message creates a "personality" for the AI and can be used to provide additional context. + +**You:** Ok, so in the context of the conversation we've been having, what would a system message look like? + +**Time Beetle:** A system message for this conversation could be something like _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ This message sets the tone for the conversation and helps the AI understand its role in the interaction. + +To create such a message, ensure it has the type "developer" like so: + +```javascript +const message = { + "role": "developer", + "content": "I'm an AI travel assistant, here to help you plan your trip to Italy." +}; +``` + +> [!NOTE] +> This used to be called "system". This is a recent change and "developer" is the new term for it. For some models this is still called "system", so if you have any issues use "system". + +**You:** Ok, great, I'll make sure to include a system message in my chat conversations. Out of curiosity, what does a system message look like for you? + +**Time Beetle:** A system message for me could be something like _"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."_ + +### Creating varied responses with the temperature setting + +**You:** Anything else I should know about chat conversations? + +**Time Beetle:** Yes, you can adjust the "temperature" of the AI's responses. The temperature is a variable with a value normally set between 0 and 1 that determines how creative the AI's responses are. A temperature of 0 will result in more predictable responses, while a temperature of 1 will result in more creative and varied responses. You can adjust the temperature based on the context of your conversation and the type of responses you want from the AI. Note, it's possible to set a value higher than 1 but that leads to more randomness and less coherence in the responses. + +**You:** So if I set the temperature to 0, the AI will provide more predictable responses, and if I set it to 1, the AI will provide more creative responses? What temperature do you have? + +**Time Beetle:** I have a temperature of 0.7 and yes, you're correct, the AI will provide more creative responses with a higher temperature. Let's see how you can set the temperature in your app: + +```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 +}); +``` + +As you can see, you can adjust the temperature based on the context of your conversation and the type of responses you want from the AI. This is a powerful feature that allows you to customize the level of creativity in the AI's responses. + +## Context window + +**You:** There's more right? + +**Time Beetle:** Yes, another important concept in generative AI models is the context window. The context window is the number of previous messages that the AI uses to generate a response. A larger context window allows the AI to consider more context and generate more coherent responses. + +**Time Beetle:** Different models have different limits to output tokens. Take the following model as example `gpt-4o-2024-08-06` it has the following specifications: + +- Maximum output tokens: roughly 16k tokens. +- Maximum context window size: 128k. + +This means the majority of tokens can be spent on the input tokens, i.e 128k - 16k = 112k tokens. + +**You:** Got it, context window, tokens, how much is a token though? + +**Time Beetle:** A token is a word or a part of a word and differs slightly by language. There's a tool you can use to measure that's recommended by OpenAI, it's called [tokenizer](https://platform.openai.com/tokenizer). Let's try a sentence and see how many tokens it is: + +```text +I want you to generate recipes for me. +``` + +![Demo of tokenizer](./assets/tokenizer.png) + +Running `tokenizer` on the sentence above gives us 9 tokens. + +**You:** That wasn't much, sounds like I can have a lot of tokens in my context window then? + +**Time Beetle:** Yes, you can experiment with different context window sizes to see how it affects the AI's responses. In fact, if you set a context window size of 100, you will limit the AI and how much it considers for input and output. Here's how you can set the context window in your app: + +```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] +> Experiment with different context window sizes to see how it affects the AI's responses. + +## Assignment - Building an engineering assistant + +Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from all sides, even shook it. + +**Leonardo:** I need an assistant that can help me with the calculations and design of the aerial screw. Can you build me an assistant that can do that? + +**You:** Of course, I can build that for you. Time Beetle, we can help with that right? + +**Time Beetle:** Yes, not a problem, in fact the aerial screw is one of Leonardo's most fascinating and visionary inventions. Designed in the late 1480s... + +**You:** All I needed was a yes, let's save the lecture for later. + +**Time Beetle:** Rude.. + +**You:** What? + +**Time Beetle:** Nothing + +
+ Aerial screw, Leonardo Da Vinci +
+ +> [!NOTE] +> The aerial screw, also known as the helical air screw, was intended to lift off the ground by compressing air. Leonardo's design featured a large, spiral-shaped rotor made of linen, stiffened with starch, and mounted on a wooden platform. The idea was that a crew of men would run around the platform, turning cranks to rotate the screw rapidly enough to achieve lift +> +> Although Leonardo never built a full-scale version of the aerial screw, his sketches and notes provide detailed insights into how he envisioned it working. He believed that if the screw was turned quickly enough, it would push against the air and lift the entire structure off the ground. +> +> However, modern scientists agree that the materials available in Leonardo's time were not strong or light enough to make this possible +> +> Despite its impracticality, the aerial screw remains a testament to Leonardo's genius and his relentless pursuit of innovation. It laid the groundwork for future developments in aviation and continues to inspire engineers and inventors to this day. +> [Read more](https://en.wikipedia.org/wiki/Leonardo%27s_aerial_screw) + +Your assignment is to build an engineering assistant that can help Leonardo with the calculations and design of the aerial screw. + +- It should be able to generate text based on user input. + +- You should set a system message to introduce the assistant. + +Check out [Sample app](/app/README.md) to get started. + +> [!TIP] +> Consider what the system message should be and what input you should provide. + +## Solution + +[Solution](./solution/solution.md) + +## Knowledge check + +**Question:** What is the purpose of the context window in generative AI models? Select all that apply. + +A. The context window allows the AI to consider more context and generate more coherent responses. + +B. The context window is the number of previous messages that the AI uses to generate a response. + +C. The context window determines how creative the AI's responses are. + +[Quiz solution](./solution/solution-quiz.md) + +## Self-Study resources + +- [Text generation](https://platform.openai.com/docs/guides/text-generation) +- [JavaScript library for OpenAI](https://github.com/openai/openai-node/tree/master/examples) +- [Tokenizer](https://platform.openai.com/tokenizer) +- [Completion API](https://platform.openai.com/docs/api-reference/completions) +- [Chat completions](https://platform.openai.com/docs/guides/text-generation#text-generation-models) From 20972c127c6d6e5a8bd035fd090806c55d4a9688 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 26 Apr 2025 15:56:55 +0200 Subject: [PATCH 09/22] fix: complete the Italian translation draft for Lesson 1 and 2 --- .../translations/README.it.md | 12 ++++----- .../02-first-ai-app/translations/README.it.md | 26 +++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 1af34b74..37dd2690 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -1,20 +1,20 @@ # Lezione 1: Introduzione alla IA Generativa e ai LLM per sviluppatori JavaScript -In questo capitolo imparerai: +In questo capitolo imparerai a: -- a capire le basi della IA Generativa e dei Large Language Model (LLM); -- a identificare le potenziali applicazioni e limitazioni dei LLM nello sviluppo JavaScript; -- a esplorare come la IA Generativa può migliorare le esperienze degli utenti nelle applicazioni JavaScript. +- capire le basi della IA Generativa e dei Large Language Model (LLM); +- identificare le potenziali applicazioni e limitazioni dei LLM nello sviluppo JavaScript; +- esplorare come la IA Generativa può migliorare le esperienze degli utenti nelle applicazioni JavaScript. ## Configurazione -Se non lo hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). +Se non lo hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate [![Guarda un breve video su una Introduzione alla IA Generativa](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) -_Questo video ti dà una introduzione alla IA Generativa con JavaScript_ +_Questo video ti offre un’introduzione alla IA Generativa con JavaScript_ 💼 Slide: [Introduzione alla IA Generativa](../../videos/slides/00-intro.pptx) diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index fa017749..a0251639 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -1,26 +1,26 @@ -# Lesson 2: Writing your first AI app +# Lezione 2: Scrivi la tua prima app IA -In this chapter you will learn: +In questo capitolo imparerai a: -- Set up your development environment. -- Write a basic app. -- Understand system prompts. +- configurare il tuo ambiente di sviluppo; +- scrivere una app di base; +- capire i prompt di sistema. -## Setup +## Configurazione -If you haven't already, set up your development environment. Here's how you can do it: [Setup your environment](/docs/setup/README.md). +Se non lo hai già fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). -## Related resources +## Risorse correlate -[![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) +[![Guarda un breve video sui Large Language Model](https://img.youtube.com/vi/GQ_2OjNZ9aA/0.jpg)](https://www.youtube.com/watch?v=GQ_2OjNZ9aA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=2) -_This video gives you an introduction to AI models called "large language models", LLMs, what they are and how you can use them to integrate AI into your apps._ +_Questo video ti offre un’introduzione ai modelli IA chiamati “Large Language Model” (LLM), che cosa sono e come puoi usarli per integrare la IA nelle tue app._ -*🎥 Click on the image above to watch a short video about large language models* +*🎥 Clicca sull”immagine sopra per guardare un breve video riguardo i Large Language Model* -💼 Slides: [Introduction to large language models, LLMs](../../videos/slides/01-llms.pptx) +💼 Slide: [Introduzione ai Large Language Model (LLM)](../../videos/slides/01-llms.pptx) -## Narrative: Picture yourself in a boat on a river +## Narrazione: Picture yourself in a boat on a river > [!NOTE] From fc302bdce5cd861f01ba6455f3b00e944ba1820b Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sun, 27 Apr 2025 10:46:30 +0200 Subject: [PATCH 10/22] fix: update the Italian translation draft for Lesson 2 --- .../01-intro-to-genai/translations/README.it.md | 8 ++++---- .../02-first-ai-app/translations/README.it.md | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 37dd2690..a527692f 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -26,13 +26,13 @@ Inoltre, la IA Generativa si è evoluta in capacità multimodali, permettendoti *In poche parole, le interfacce in linguaggio naturale stanno diventando la nuova interfaccia standard per molte app e i tuoi utenti si aspettano di usarle.* -## Narrazione: Un viaggio nel tempo +## Storia: Un viaggio nel tempo > [!NOTE] > Iniziamo con una panoramica della storia: una storia che collega il passato e il futuro! Procedendo in questo curriculum, ti imbarcherai in un’avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle più grandi menti della storia. Insieme, affronterete sfide ed esplorerete come l’IA Generativa può rivoluzionare le tue applicazioni JavaScript._ > [!NOTE] -> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interact-with-dinocrates) se preferisci saltare direttamente al contenuto tecnico. +> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci saltare direttamente al contenuto tecnico. Il tuo viaggio inizia nella Londra del 1860, dove assumerai il ruolo di un abile meccanico. Attraverso una serie di avvincenti avventure, affinerai le tue abilità in IA e sbloccherai soluzioni che trascendono il tempo. @@ -157,7 +157,7 @@ _Macchina del tempo, “George” lo scarabeo metallico_ > > Sotto il regno tolemaico, che seguì la morte di Alessandro, Alessandria divenne una delle città più prospere e influenti del suo tempo. -## Interazione con Dinocrate +## Interagisci con Dinocrate Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). @@ -319,7 +319,7 @@ Ecco un esempio di “applicazione chatbot” in azione:.» > **Lo sapevi?** > [Il 62.5% degli sviluppatori dice di stare usando JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) con molti che preferiscono [TypeScript](https://www.typescriptlang.org) per i nuovi progetti. -## Compito – Aiutare Democrate +## Compito – Aiuta Dinocrate Per usare un Large Language Model (LLM) per aiutare Dinocrate con il faro di cui abbiamo parlato prima nella nostra storia, useremo qualcosa chiamato prompt, una frase per descrivere ciò che si vuole. È possibile specificare sia le informazioni di cui si ha bisogno sia il modo in cui si desidera che vengano presentate. diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index a0251639..76513fd7 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -16,26 +16,26 @@ Se non lo hai già fatto, configura il tuo ambiente di sviluppo. Ecco come puoi _Questo video ti offre un’introduzione ai modelli IA chiamati “Large Language Model” (LLM), che cosa sono e come puoi usarli per integrare la IA nelle tue app._ -*🎥 Clicca sull”immagine sopra per guardare un breve video riguardo i Large Language Model* +*🎥 Clicca sull’immagine sopra per guardare un breve video riguardo i Large Language Model* 💼 Slide: [Introduzione ai Large Language Model (LLM)](../../videos/slides/01-llms.pptx) -## Narrazione: Picture yourself in a boat on a river +## Storia: Immaginati in una barca su un fiume > [!NOTE] -> _Our story so far: You are a maker of things, a craftsman from 1860s London who has traveled through time using a mysterious device called the Time Beetle. You've journeyed through the annals of history, witnessing the creation of the lighthouse at Alexandria, a marvel of ancient engineering you helped create with a little help from Dinocrates and the Time Beetle._ +> _La nostra storia finora: Sei un costruttore di oggetti, un artigiano della Londra del 1860 che ha viaggiato nel tempo utilizzando un misterioso dispositivo chiamato Scarabeo del Tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del faro di Alessandria, una meraviglia dell’ingegneria antica che avete contribuito a creare con un piccolo aiuto da parte di Dinocrate e dello Scarabeo del Tempo._ > -> See [Lesson 1](../01-intro-to-genai/README.md) if you want to catch up with the story from the beginning and get started with Generative AI. +> Guarda la [Lezione 1](../01-intro-to-genai/README.it.md) se vuoi seguire la storia dall’inizio e iniziare a conoscere l’IA Generativa. > [!NOTE] -> While we recommend going through the story (it's fun!), [click here](#interact-with-leonardo) if you'd prefer to jump straight to the technical content. +> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci saltare direttamente al contenuto tecnico. -Together with Dinocrates, you put the finishing touches on the lighthouse at Alexandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea. +Insieme a Dinocrate, hai dato gli ultimi ritocchi al faro di Alessandria. L’imponente struttura brilla alla luce del sole, la sua pietra levigata riflette il Mar Mediterraneo. -You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors. +Abbassi lo sguardo sullo Scarabeo del Tempo nella tua mano, la cui superficie metallica è fredda contro il tuo palmo. Stringendo il pugno intorno ad esso, sussurri, «Portami a casa.» Lo scarabeo inizia a brillare, emettendo una soffusa, calda luce e il mondo attorno a te si dissolve in un turbinio di colori. -### A new adventure +### Una nuova avventura When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist. From 7015de114db81520bfa99b31d0522ce30e70e996 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sun, 4 May 2025 18:12:02 +0200 Subject: [PATCH 11/22] fix: update the Italian translation draft for Lesson 2 --- lessons/02-first-ai-app/translations/README.it.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index 76513fd7..9c48e9c5 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -37,15 +37,15 @@ Abbassi lo sguardo sullo Scarabeo del Tempo nella tua mano, la cui superficie me ### Una nuova avventura -When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist. +Quando apri gli occhi, il mondo è cambiato. Quando riesci ad alzarti, ti rendi conto di essere in una barca su un fiume. Ti guardi intorno, in lontananza vedi degli edifici, i cui contorni sono offuscati dalla nebbia del mattino. -Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting. +Guardando intorno alla barca, trovi un lungo remo appoggiato alla fiancata. Afferrandolo, inizi a remare verso gli edifici lontani. Man mano che ti avvicini, gli edifici vengono messi a fuoco: sono antichi, la loro architettura ricorda un dipinto rinascimentale.
- Boat on the rive, man standing with a paddle + Barca sul fiume, uomo in piedi con la pagaia
-The question now is, where and when are you this time? +La domanda ora è, dove e quando sei questa volta? You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly. From 114eebc74cbf54226d49684c86169073feaf3804 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Mon, 5 May 2025 14:34:00 +0200 Subject: [PATCH 12/22] fix: update the Italian translation draft for Lesson 2 --- .../02-first-ai-app/translations/README.it.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index 9c48e9c5..ed31bfe1 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -42,42 +42,42 @@ Quando apri gli occhi, il mondo è cambiato. Quando riesci ad alzarti, ti rendi Guardando intorno alla barca, trovi un lungo remo appoggiato alla fiancata. Afferrandolo, inizi a remare verso gli edifici lontani. Man mano che ti avvicini, gli edifici vengono messi a fuoco: sono antichi, la loro architettura ricorda un dipinto rinascimentale.
- Barca sul fiume, uomo in piedi con la pagaia + Barca sul fiume, uomo in piedi con la pagaia
La domanda ora è, dove e quando sei questa volta? -You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly. +Riesci a fissare la barca al molo e inizi a camminare lungo le assi di legno: il suono dei tuoi passi riecheggia dolcemente. -As you walk, you notice a man with a long beard and a hat, digging through a crate of what looks like mechanical parts. His hands move deftly, sorting through gears and springs with practiced ease. +Mentre cammini, noti un uomo con una lunga barba e un cappello che scava in una cassa di quelli che sembrano pezzi meccanici. Le sue mani si muovono abilmente, selezionando ingranaggi e molle con una disinvoltura da esperto.
- Leonardo Da Vinci standing next to a crate in the harbour + Leonardo Da Vinci in piedi accanto a una cassa nel porto
-### Help me, Leonardo +### Aiutami, Leonardo -**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate. +**Tu:** «Mi scusi, signore, dove mi trovo?» Alza lo sguardo verso di te, con un’evidente confusione negli occhi. Realizzando di stargli parlando in inglese, usi subito il dispositivo che hai in mano e gli chiedi di tradurre per te. -**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'" +**Scarabeo del Tempo:** «Certamente, lo tradurrò nell’italiano del XV secolo. “Dove sono?”» -**Old man:** The old man replies, "Siete a Firenze, signore. E chi siete voi?" +**Uomo anziano:** L’uomo anziano risponde, «Siete a Firenze, signore. E chi siete voi?» -**Time Beetle:** The Time Beetle translates, "He says you're in Florence, and asks who you are." +**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce, «Dice che ti trovi a Firenze e chiede chi sei.» -**You:** "Tell him I'm a maker of things, and I'm looking for a place to work." +**Tu:** «Digli che sono un artigiano e che sto cercando un lavoro.» -**Old man:** Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci? +**Uomo anziano:** «Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci?» -**Time Beetle:** The Time Beetle translates, "He asks if you've heard of Leonardo da Vinci." +**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce, «Chiede se avete sentito parlare di Leonardo da Vinci.» -**You:** "Of course," you say. "Tell him I have and I would like to meet him." +**Tu:** «Certo,» rispondi. «Digli che ne ho sentito parlare e che mi piacerebbe conoscerlo.» -**Old man:** The old man smiles, "Allora, seguitemi, vi porterò da lui." +**Uomo anziano:** L’uomo anziano sorride, «Allora, seguitemi, vi porterò da lui.» -**You:** You ask, "What did he say?" +**Tu:** Chiedi, «Che cosa ha detto?» -**Time Beetle:** The Time Beetle responds, "He said he'll take you to Leonardo." +**Scarabeo del Tempo:** Lo Scarabeo del Tempo risponde, «Dice che ti porterà da Leonardo.» ### At the workshop From 22d520d75a1c6b2e487cd6b860c673b6cc3815b6 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 10 Oct 2025 13:42:38 +0200 Subject: [PATCH 13/22] chore: resume work on the Italian translation from Lesson 1 --- .../translations/README.it.md | 328 +++++++++--------- 1 file changed, 159 insertions(+), 169 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index a527692f..f9b89c97 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -1,190 +1,180 @@ -# Lezione 1: Introduzione alla IA Generativa e ai LLM per sviluppatori JavaScript +# Lezione 1: Introduzione all'IA generativa e agli LLM per sviluppatori JavaScript In questo capitolo imparerai a: -- capire le basi della IA Generativa e dei Large Language Model (LLM); -- identificare le potenziali applicazioni e limitazioni dei LLM nello sviluppo JavaScript; -- esplorare come la IA Generativa può migliorare le esperienze degli utenti nelle applicazioni JavaScript. +- comprendere le basi dell'IA generativa e dei Large Language Model (LLM); +- identificare le potenziali applicazioni e limitazioni dei Large Language Model (LLM) nello sviluppo JavaScript; +- esplorare come l'IA generativa può migliorare l'esperienza utente nelle applicazioni JavaScript. ## Configurazione -Se non lo hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). +Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate -[![Guarda un breve video su una Introduzione alla IA Generativa](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) +[![Guarda un breve video introduttivo sull'intelligenza artificiale generativa](https://img.youtube.com/vi/vLYtDgs_zx8/0.jpg)](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) -_Questo video ti offre un’introduzione alla IA Generativa con JavaScript_ +_Questo video offre un'introduzione all'IA generativa con JavaScript_ -💼 Slide: [Introduzione alla IA Generativa](../../videos/slides/00-intro.pptx) +💼 Slide: [Introduzione all'IA generativa](/videos/slides/00-intro.pptx) ## IA Generativa -Fino ad ora, probabilmente ai sentito parlare di strumenti come ChatGPT o IA Generativa. Il concetto è semplice: tu fai una richiesta e un modello (spesso chiamato Large Language Model (LLM)) genera un paragrafoo o persino una pagina intera di testo. Questo output può essere usato per scopi diversi, tra cui la scrittura creativa, la risposta a domande e il coding. +By now, you've likely heard of tools like ChatGPT or Generative AI. The concept is simple: you provide a prompt, and a model—often called a Large Language Model (LLM)—generates a paragraph or even an entire page of text. This output can be used for various purposes, including creative writing, answering questions, and coding. -Inoltre, la IA Generativa si è evoluta in capacità multimodali, permettendoti di fornire una immagine o un video come input e di ricevere una varietà di output. Questo avanzamento ha significativamente migliorato This advancement has significantly enhanced i flusso di lavoro di molte persone: non solo generando testo, ma anche riassumendo, traducendo e altro ancora. +Probabilmente avrete già sentito parlare di strumenti come ChatGPT o AI generativa. Il concetto è semplice: si fornisce un prompt e un modello, spesso chiamato Large Language Model (LLM), genera un paragrafo o addirittura un'intera pagina di testo. Questo output può essere utilizzato per vari scopi, tra cui la scrittura creativa, rispondere a domande e il coding. -*In poche parole, le interfacce in linguaggio naturale stanno diventando la nuova interfaccia standard per molte app e i tuoi utenti si aspettano di usarle.* +Inoltre, l'IA generativa si è evoluta in capacità multimodali, consentendo di fornire un'immagine o un video come input e ricevere una varietà di output. Questo progresso ha migliorato significativamente il flusso di lavoro di molte persone, non solo generando testo, ma anche riassumendo, traducendo e altro ancora. -## Storia: Un viaggio nel tempo +*In poche parole, le interfacce in linguaggio naturale stanno diventando il nuovo standard per molte app e i tuoi utenti si aspettano di poterle usare.* -> [!NOTE] -> Iniziamo con una panoramica della storia: una storia che collega il passato e il futuro! Procedendo in questo curriculum, ti imbarcherai in un’avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle più grandi menti della storia. Insieme, affronterete sfide ed esplorerete come l’IA Generativa può rivoluzionare le tue applicazioni JavaScript._ +## Narrazione: Un viaggio attraverso il tempo -> [!NOTE] -> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci saltare direttamente al contenuto tecnico. +> [!NOTE] +> Cominciamo con una panoramica della storia, una storia che collega il passato al futuro! Man mano che procederai con questo programma di studi, ti imbarcherai in un'avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle menti più brillanti della storia. Insieme affronterete sfide ed esplorerete come l'IA generativa possa rivoluzionare le vostre applicazioni JavaScript. -Il tuo viaggio inizia nella Londra del 1860, dove assumerai il ruolo di un abile meccanico. Attraverso una serie di avvincenti avventure, affinerai le tue abilità in IA e sbloccherai soluzioni che trascendono il tempo. +> [!NOTE] +> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci passare direttamente al contenuto tecnico. + +Il tuo viaggio inizia nella Londra degli anni '60 dell'Ottocento, dove vestirai i panni di un abile meccanico. Attraverso una serie di avventure avvincenti, affinerai le tue abilità di intelligenza artificiale e sbloccherai soluzioni che trascendono il tempo. ### Nel vortice - Londra 1860 -Nel cuore della Londra degli anni ’60 del 1800, sei considerato come uno dei più abili meccanici del tuo tempo. La tua officina è nascosta in uno stretto vicolo.Le pareti sono tappezzate di scaffali traboccanti di pezzi meccanici, cianografie e progetti semilavorati. +Nel cuore della Londra degli anni '60 dell'Ottocento, sei riconosciuto come uno dei meccanici più abili della tua epoca. La tua officina è nascosta in un vicolo stretto. Le pareti sono ricoperte da scaffali traboccanti di parti meccaniche, progetti e lavori lasciati a metà. Il tuo banco da lavoro, il cuore della tua officina, è un disordine organizzato.
- Officina di Londra + Officina di Londra
-_Al centro del banco si trova il torso di un robot, una meraviglia dell’ingegneria che ha richiesto mesi di sforzi. La sua struttura in legno è intricata e ogni giuntura è stata meticolosamente progettata per garantire un movimento fluido._ +_Al centro del banco giace il torso di un robot, una meraviglia ingegneristica che ha richiesto mesi di lavoro. La sua struttura in legno è finemente intagliata e ogni giuntura è stata meticolosamente progettata per garantire movimenti fluidi._ ### Una lettera, per te? -Improvvisamente, un colpo alla porta interrompe i tuoi pensieri. I visitatori a quest’ora sono rari. Asciugandoti le mani su uno straccio, ti avvicini alla porta, incuriosito. +All'improvviso, un colpo alla porta interrompe i tuoi pensieri. È raro ricevere visite a quest'ora. Ti asciughi le mani con uno straccio e ti avvicini alla porta, incuriosito. -Aprendola, non trovi nessuno. Invece, i tuoi occhi sono attratti da una busta sigillata a terra. La raccogli e leggi: +Aprendo la porta, non trovi nessuno. Invece, il tuo sguardo è attratto da una busta sigillata sul pavimento. La raccogli e leggi: -_“Caro amico,_ +_"Caro amico,_ -_ti invio questa lettera per aiutarti nei tuoi sforzi con l’automa. È fondamentale che continui questo lavoro. In allegato c’è la chiave della biblioteca. Incontriamoci lì oggi alle 15:00._ +_Ti invio questa lettera per aiutarti nei tuoi sforzi con l'automa. È fondamentale che tu continui questo lavoro. In allegato troverai una chiave della biblioteca. Ci vediamo lì oggi alle 15:00._ _Tuo,_ -_Charles Babbage.”_ +_Charles Babbage."_ -### In biblioteca +### Andiamo in biblioteca -Charles Babbage, il grande matematico e inventore della macchina differenziale, vuole conoscerti. In fretta, prendi il cappotto ed esci dalla porta. +Charles Babbage, il grande matematico e inventore della macchina differenziale, vuole incontrarti. Prendi rapidamente il cappotto ed esci di casa. -Dopo una camminata di venti minuti lungo il Tamigi, finalmente arrivi alla biblioteca dove trovi la porta leggermente aperta. +After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open. -L’interno è buio e tetro, l’unica luce filtra dalle finestre sudice e proietta ombre inquietanti sulle pareti. +It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls. -**Tu:** «Permesso? Signor Babbage?» +**You:** "Hello? Mr. Babbage?" -Quando gli occhi si adattano alla luce fioca, noti una figura in lontananza che ti saluta. Cammini verso di lui, i tuoi passi risuonano sul pavimento di legno. La figura diventa più chiara e la riconosci dalle foto dei giornali: è Charles Babbage. +As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage. -
- Libreria polverosa -
+![Dusty Library](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/library.png) -### Che cos’è questo dispositivo? +### What's This Device? -Nel momento in cui ti avvicini, scoppia un lampo accecante e lui scompare. +Just as you step closer, a blinding flash erupts, and he vanishes. -Si lascia dietro di sé un piccolo dispositivo metallico che gira sul pavimento. Lo raccogli, la sua superficie liscia e fredda ronza dolcemente. È diverso da qualsiasi cosa tu abbia mai visto eppure stranamente familiare, avverti un senso di potere che emana da esso. +Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it. -Assomiglia a un piccolo scarabeo, dal design intricato, con tre pulsanti: una freccia verso l’alto, una freccia verso il basso e un pulsante rosso incandescente. Dalla schiena si estende una piccola antenna che pulsa di energia. +It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy. -Spinto dalla curiosità, dirigi le dita verso il pulsante rosso. Nel momento in cui lo premi, il mondo intorno a te brilla e i colori turbinano violentemente tutto intorno. +Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you. -Poi, il buio e la sensazione di cadere. +Then, blackness, and a sense of falling. -
- Vortice temporale -
+![Time Vortex](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/vortex.png) -### Alessandria, 300 a.C. +### Alexandria 300 BC -Ti svegli disorientato. Quando la vista si schiarisce, un’antica città si dispiega davanti a te: vivace, vibrante e viva. +You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive. -Persone in toga si muovono per le strade, le loro voci si fondono in una sinfonia di antichi dialetti, l’aria si riempie del profumo di spezie esotiche e del suono lontano dei mercanti che vendono le loro merci. +People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares. -
- Alessandria, 300 a.C. -
+![Alexandria 300 BC](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/alexandria.png) -**Tu:** «Sicuramente avrò sbattuto la testa», pensi, chiudendo gli occhi e riaprendoli, ma la scena rimane invariata. +**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged. -«Sono forse bloccato nel passato? Avrò il coraggio di premere di nuovo quel pulsante?» Prima che tu possa decidere, una figura ti si avvicina, salutandoti. +Am I stuck in the past? Do I dare press that button again? Before you can decide, a figure approaches you, waving. -### L’incontro con Dinocrate +### Meeting Dinocrates -Un anziano signore in toga ti saluta dai gradini del grande tempio. I suoi capelli e la sua barba bianchi catturano la luce del sole, conferendogli un bagliore quasi etereo. +An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow. -
- Dinocrate che indossa una toga -
+![Dinocrates wearing a toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) -**Dinocrate:** «Benvenuto, viaggiatore,» dice calorosamente. «Sono Dinocrate, l’architetto di questa grande città. Il tuo arrivo è stato predetto.» +**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold." -**Tu:** «Davvero? Voglio dire, certo lo è stato. Sono qui per aiutare, credo.» +**You:** It was? I mean, of course, it was. I'm here to help, I think. -**Dinocrate:** «Sì, come dicevo, ti si aspettava da tempo. Abbiamo un compito che richiede le tue abilità uniche.» +**Dinocrates:** Yes, as I was saying, you've been expected for some time now. We have a task that requires your unique skills. -**Dinocrate:** «Le nostre navi faticano a navigare lungo la costa: dobbiamo costruire un faro. Ne sai qualcosa?» +**Dinocrates:** "Our ships struggle to navigate the coast—we must build a lighthouse. Do you know anything about them?" -**Tu:** «Sono un meccanico. Costruisco automi. Vediamo che cosa posso fare.» +**You:** "I'm a mechanic. I build automatons. Let me see what I can do." -### Lo “Scarabeo del Tempo” +### The "Time Beetle" -Un pensiero ti assale. «Il dispositivo può capirmi se gli parlo?» +A thought strikes you. Can the device understand me if I speak to it? -**Tu:** «Dispositivo, puoi capirmi?» +**You:** "Device, can you understand me?" -**Dispositivo:** «Certo. Di che cosa hai bisogno?» +**Device:** "Of course. What do you need?" -**Tu:** «Puoi aiutarmi a costruire un faro?» +**You:** "Can you help me build a lighthouse?" -**Dispositivo:** «Certamente. Non sarà un problema.» +**Device:** "Certainly. That won’t be a problem." -**Tu:** «Do you have a name?» +**You:** "Do you have a name?" -**Dispositivo:** «Io sono lo Scarabeo del Tempo. Il mio creatore mi chiama George; dice che è un bel nome per uno scarabeo.» +**Device:** "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle." -**Tu:** «Hai ragione, George è un bel nome, infatti era il nome di mio padre.» +**You:** You're right, George is a good name, it was my father's name in fact. -
- Dispositivo per viaggiare nel tempo che somiglia a uno scarabeo metallico -
+![Time Beetle](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) -_Macchina del tempo, “George” lo scarabeo metallico_ +_Time device, “George” the metallic beetle_ > [!NOTE] -> Nel 300 a.C., Alessandria era una fiorente città fondata da Alessandro Magno nel 331 a.C. Divenne rapidamente una delle più grandi città del mondo ellenistico. Progettata dal capo architetto di Alessandro, Dinocrate, divenne un importante porto e centro culturale. +> In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub. > -> Alessandria era nota per le sue imponenti strutture, tra cui il Pharos (faro), una delle sette meraviglie del mondo antico, e la leggendaria Biblioteca di Alessandria. La posizione strategica della città la rendeva un centro chiave per il commercio e lo scambio di conoscenze. +> Alexandria was known for its impressive structures, including the Pharos (lighthouse), one of the Seven Wonders of the Ancient World, and the legendary Library of Alexandria. The city’s strategic location made it a key center for trade and knowledge exchange. > -> Sotto il regno tolemaico, che seguì la morte di Alessandro, Alessandria divenne una delle città più prospere e influenti del suo tempo. +> Under the Ptolemaic Kingdom, which followed Alexander’s death, Alexandria grew into one of the most prosperous and influential cities of its time. ## Interagisci con Dinocrate -Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). +If you want to interact with Dinocrates, run the [Characters](/app/README.md) app. > [!IMPORTANT] -> Questo è del tutto fittizio; le risposte sono generate dall’IA. -> [Disclaimer AI responsabile](../../README.md#responsible-ai-disclaimer) +> This is entirely fictional; the responses are generated by AI. +> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) -
- Dinocrate che indossa una toga -
+![Dinocrates wearing a toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) -**Passaggi**: +**Steps**: -1. Inizia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) -2. Naviga in _/app_ nella root del repo. -3. Individua la console ed esegui `npm install` seguito da `npm start`. -4. Appena compare, seleziona il pulsante “Open in Browser”. -5. Chatta con Dinocrate. +1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Navigate to _/app_ in the repo root. +3. Locate the console and run `npm install` followed by `npm start`. +4. Once it appears, select the "Open in Browser" button. +5. Chat with Dinocrates. > [!NOTE] - > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere un token di [accesso personale a GitHub](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituire la chiave nel codice. + > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. -### Codice in anteprima +### Code Sneak Peek -Anche se c’è ancora molto da dire in questo curriculum sull’IA Generativa, diamo una rapida occhiata al codice dell’IA per iniziare a imparare a usare JavaScript con l’IA. +While there is still a lot more to cover in this Generative AI curriculum, let's take a quick peek at the AI code to begin learning about using JavaScript with AI. -All’interno di `/app/app.js` troverai una funzione `app.post` che gestisce la funzionalità di IA Generativa. È mostrata di seguito: +Inside of `/app/app.js` you'll find an `app.post`function that handles the Generative AI functionality. It's shown next: ```JavaScript app.post('/send', async (req, res) => { @@ -224,138 +214,138 @@ app.post('/send', async (req, res) => { }); ``` -Ecco un riepilogo passo-passo di ciò che fa la funzione: +Here's a step-by-step summary of what the function does: -1. **Estrazione del messaggio dalla richiesta**: La funzione estrae il messaggio dal corpo della richiesta (req.body). -2. **Creazione dell’array del prompt**: Costruisce un array di messaggi, includendo il messaggio di sistema e il messaggio del prompt dell’utente. -3. **Inizializzazione del client di OpenAI**: Un client è inizializzato con l’URL di base e la chiave API recuperata dalle variabili d’ambiente. Un modello _gpt-4o-mini_ da [GitHub Models](https://github.com/marketplace/models) è utilizzato per processare il prompt e restituire una risposta. -4. **Invio del prompt a OpenAI**: La funzione logga il prompt e lo invia alle API di OpenAI per generare un completamento. -5. **Gestione della risposta**: In caso di successo, la funzione risponde con il prompt e la risposta del completamento. -6. **Gestione dell’errore**: Se si verifica un errore, risponde con lo stato 500 e il messaggio di errore. +1. **Extract Message from Request**: The function extracts the message from the request body (req.body). +2. **Create Prompt Array**: It constructs an array of messages, including a system message and the user's prompt message. +3. **Initialize OpenAI Client**: An OpenAI client is initialized with the base URL and API key from environment variables. A _gpt-4o-mini_ model from [GitHub Models](https://github.com/marketplace/models) is used to process the prompt and return a response. +4. **Send Prompt to OpenAI**: The function logs the prompt and sends it to the OpenAI API to generate a completion. +5. **Handle Response**: If successful, the function responds with the prompt and the completion's answer. +6. **Error Handling**: If an error occurs, it responds with a 500 status and the error message. -> **Nota**: [GitHub Copilot](https://github.com/features/copilot) è stato usato per generare questo riassunto del codice. IA Generativa in azione! +> **Note**: [GitHub Copilot](https://github.com/features/copilot) was used to generate this code summary. Generative AI in action! -### Che cosa può fare la IA Generativa per me e le mie app? +### What Can Generative AI Do for Me and My Apps? > [!NOTE] -> Probabilmente avrai già capito che lo Scarabeo del Tempo funziona come un assistente IA con cui si può interagire utilizzando il linguaggio naturale, scritto o parlato. +> You've probably figured out by now that the time beetle works like an AI assistant that you can interact with using natural language, written or spoken. -Nel corso della tua avventura ad Alessandria, inizierai a vedere le possibilità di combinare creatività, ingegno e strumenti all’avanguardia per risolvere le sfide e trasformare il mondo che ti circonda. +As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you. -**Tu:** «Dimmi di più sui fari», dici al tuo dispositivo. +**You:** Tell me more about lighthouses, you say to your device. -**Scarabeo del Tempo:** «Un faro è una torre dotata di una luce brillante sulla sommità, situata vicino alla costa per guidare le navi in mare. La luce serve come aiuto alla navigazione, aiutando i marinai a evitare scogli e rocce pericolose e a raggiungere in sicurezza il porto.» +**Time Beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor. -Dinocrate ascolta la vostra conversazione e aggiunge: +Dinocrates overhears your conversation and adds: -**Dinocrate:** «Abbiamo bisogno di un faro per guidare le nostre navi al sicuro nel porto. I mari possono essere insidiosi e molte navi sono andate perse sugli scogli. Abbiamo bisogno di un faro che le guidi a casa.» +**Dinocrates:** We need a lighthouse to guide our ships safely into the harbor. The seas can be treacherous, and many ships have been lost to the rocks. We need a beacon of light to guide them home. -#### Aree di applicazione della IA Generativa +#### Generative AI application areas -**Tu:** «I fari sembrano sicuramente un’area interessante, cos’altro può fare l’IA Generativa per me e le mie app?» +**You:** Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps? -**Scarabeo del Tempo:** «Nel XXI secolo, l’IA Generativa ha rivoluzionato molti settori, dalla sanità alla finanza all’intrattenimento, ecco alcuni esempi: +**Time Beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples: -- **Chatbot**: Un chatbot che può generare in grado di generare risposte simili a quelle umane alle domande degli utenti. Invece di una pagina di FAQ statica, gli utenti possono interagire con un chatbot che fornisce risposte dinamiche. Questo rende l’esperienza dell’utente più coinvolgente e meno frustrante. +- **Chatbot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience. -- **Assistenti e agenti** Gli assistenti e gli agenti possono eseguire istruzioni più avanzate, come sfruttare gli strumenti per chiamare le API, eseguire codice, generare immagini e altro ancora. Gli agenti avanzati possono raggiungere obiettivi e svolgere attività in modo autonomo. +- **Assistants and Agents** Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously. -- **Uno strumento per la creazione di contenuti**: Uno strumento per generare post per blog e social media. Immaginate di creare campagne in pochi minuti invece che in ore, quando un sito di e-commerce ha una vendita del Black Friday. +- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale. -- **Completamento del codice**: Uno strumento di completamento del codice in grado di generare snippet di codice in base all’input dell’utente. Questo può essere un enorme risparmio di tempo per gli sviluppatori, soprattutto quando lavorano a compiti ripetitivi. +- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks. -- **Traduzione** – Tradurre il testo tra le lingue con grande precisione. +- **Translation** – Translate text between languages with high accuracy. -Come puoi vedere, questi miglioramenti possono aiutare sia il front office che il back office della tua app e della tua azienda. +As you can see, these improvements can both help the front office and the back office of your app and company. -Ecco un esempio di “applicazione chatbot” in azione:.» +Here's an example of a "chatbot application" in action: -![Immagine di una app di chat](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) +![Image of chat app](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) -**Tu:** «Affascinante, prenderò nota di andare nel XXI secolo per vedere come vengono utilizzati questi strumenti.» +**You:** Fascinating, I'll make a note of going to the 21st century to see how these tools are used. -### IA Generativa ed ecosistema JavaScript +### Generative AI and the JavaScript ecosystem -**Scarabeo del Tempo:** «Un modo popolare di costruire applicazioni nel XXI secolo è l’uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema. Questo ecosistema comprende il linguaggio di programmazione stesso, le librerie e i framework, il supporto della comunità, gli IDE e gli strumenti. Nell’ecosistema di un linguaggio di programmazione, di solito si parla di quanto segue:» +**Time Beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following: -| Che cosa | Descrizione | -| --- | --- | -| Il linguaggio di programmazione in sé | Comprese la sua sintassi e le sue funzionalità. | -| Librerie e framework | Librerie disponibili per interagire con i modelli di IA Generativa. | -| Comunità che sostiene il linguaggio | La comunità è importante, soprattutto quando si cerca di imparare qualcosa di nuovo. La comunità intorno alle librerie e ai framework aiuta a decidere quali librerie usare. Inoltre, influisce sulla facilità di trovare aiuto quando si è bloccati. | +| What | Description | +|---|---| +| The programming language itself | Including its syntax and features. | +| Libraries and frameworks | Available libraries to interact with the generative AI models. | +| Community supporting the language| Community matters, especially when trying to learn something new. The community around libraries and frameworks helps decide what libraries to use. It also affects how easy it is to find help when you're stuck. | -**Tu:** «Interessante, ho sentito parlare di programmazione, non è forse qualcosa che hanno sperimentato Ada Lovelace e Charles Babbage?» +**You:** Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage? -**Scarabeo del Tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l’inventore del motore differenziale, un computer meccanico. Sono stati pionieri nel campo dell’informatica, gettando le basi per l’era digitale.» +**Time Beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age. -**Tu:** «Sono stati? Cosa vuol dire “sono stati”? Ho appena ricevuto una lettera da Charles Babbage.» +**You:** Were? What do you mean were? I just got a letter from Charles Babbage. -**Scarabeo del Tempo:** «Diciamo che sei in una posizione unica per interagire con i personaggi storici in un modo che pochi altri possono fare.» +**Time Beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can. -### Ecosistema JavaScript +### JavaScript Ecosystem -**Tu:** «Quindi, ecosistemi hai detto, sto solo prendendo appunti, che cosa c’è riguardo a JavaScript e in che modo è diverso dagli altri ecosistemi?» +**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems? -**Scarabeo del Tempo:** «JavaScript è uno dei linguaggi di programmazione più popolari nel mondo nel XXI secolo. Ecco alcune ragioni per cui è così popolare:» +**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular: -| Che cosa | Descrizione | -| --- | --- | -| Potenziale di sviluppo full-stack | JavaScript è uno dei pochi linguaggi che può essere utilizzato sia per lo sviluppo front-end che per quello back-end. | -| Ricco ecosistema di librerie | JavaScript ha un vasto ecosistema di librerie, con framework come React, Angular, Vue e altri ancora. C’è NPM, il gestore di pacchetti, che è uno dei più grandi repository di pacchetti al mondo. | -| Forte sostegno della comunità | JavaScript ha una comunità ampia e attiva, con molte risorse disponibili per l’apprendimento e lo sviluppo. Inoltre, funziona semplicemente nel browser, il che è un enorme vantaggio. | -| IDE e strumenti | Per JavaScript sono disponibili diversi IDE, come Visual Studio Code, WebStorm e Atom. Questi IDE hanno estensioni costruite da aziende e dalla comunità che aiutano l’utente in vari aspetti dello sviluppo. | -| IA e JavaScript | JavaScript supporta lo sviluppo dell’IA con librerie come TensorFlow.js, Brain.js, le API di OpenAI e altre che consentono agli sviluppatori di integrare l’apprendimento automatico e l’IA Generativa nelle applicazioni web e lato server. | +| What | Description | +|-|-| +| Potential for full-stack development | JavaScript is one of the few languages that can be used for both front-end and back-end development. | +| Rich library ecosystem | JavaScript has a vast library ecosystem, with frameworks like React, Angular, Vue, and more. There's NPM, the package manager, which is one of the largest package repositories in the world. | +| Strong community support | JavaScript has a large and active community, with many resources available for learning and development. It also just works in the browser, which is a huge advantage. | +| IDEs and tools | JavaScript has a variety of IDEs available, such as Visual Studio Code, WebStorm, and Atom. These IDEs have extensions built by companies and the community helping you with various aspects of development. | +| AI and JavaScript | JavaScript supports AI development with libraries like TensorFlow.js, Brain.js, OpenAI’s APIs, and more enabling developers to integrate machine learning and Generative AI into web and server-side applications. | -**Tu:** «Sono molte ragioni, sembra che dovrei puntare su JavaScript per i miei progetti futuri.» +**You:** That's a lot of reasons, sounds like I should bet on JavaScript for my future projects. -**Scarabeo del Tempo:** «In effetti, JavaScript è un linguaggio versatile e anche Python è un linguaggio popolare per lo sviluppo dell’intelligenza artificiale.» +**Time Beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development. -**Tu:** «Python, che cosa c’entrano i serpenti con la programmazione?» +**You:** Python, what do snakes have to do with programming? -**Scarabeo del Tempo:** «Teniamo questo argomento per un’altra volta, che ne dici?» +**Time Beetle:** Let's save that for another time, shall we? -**Scarabeo del Tempo:** «In precedenza ho spiegato perché JavaScript e il suo ecosistema sono adatti in generale, ma perché in particolare per l’IA Generativa? La risposta è che si tratta di un linguaggio supportato da molti fornitori di cloud e di framework e strumenti di IA. Si ritiene inoltre che, anche se Python potrebbe essere il più utilizzato per gli scenari di IA, molti sviluppatori utilizzano JavaScript e Typescript.» +**Time Beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript. -> **Lo sapevi?** -> [Il 62.5% degli sviluppatori dice di stare usando JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) con molti che preferiscono [TypeScript](https://www.typescriptlang.org) per i nuovi progetti. +> **Did you know?** +> [62.5% of developers say they're using JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) with many preferring [TypeScript](https://www.typescriptlang.org) for new projects. -## Compito – Aiuta Dinocrate +## Assignment – Helping Dinocrates -Per usare un Large Language Model (LLM) per aiutare Dinocrate con il faro di cui abbiamo parlato prima nella nostra storia, useremo qualcosa chiamato prompt, una frase per descrivere ciò che si vuole. È possibile specificare sia le informazioni di cui si ha bisogno sia il modo in cui si desidera che vengano presentate. +To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented. -**Scarabeo del Tempo:** «Cominciamo, usiamo un LLM per ricercare come costruire un faro per aiutare Dinocrate.» +**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates. -**Scarabeo del Tempo:**: «Devi fornire al LLM (cioè a “me”) un contesto su come costruire, con quali strumenti e quali risorse dovrebbero essere disponibili ai tempi di Alessandria.» +**Time Beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria. -**Tu:** «Ok, dimmi di più sugli LLM.» +**You:** Ok, tell me more about LLMs. -**Scarabeo del Tempo:** «Gli LLM sono un tipo di modello di intelligenza artificiale in grado di generare un testo simile a quello umano sulla base di una richiesta data. Sono addestrati su vaste quantità di dati e possono generare testi coerenti, creativi e contestualmente rilevanti.» +**Time Beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant. -**Scarabeo del Tempo:** «Probabilmente dovresti chiedermelo in un modo migliore, in modo che possa darti una risposta migliore, riguardo a *coff* *coff* Case luminose, Alessandria, 300 a.C., Dinocrate, Faro di Alessandria, ecc.» +**Time Beetle:** You probably want to ask me in a better way, so I can give you a better answer, about you know *cough* *cough* Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc. -**Tu:** «Capito, aggiungo un ulteriore contesto alla richiesta e poi te lo chiedo.» +**You:** Got it, add more context to the prompt and then ask you. -**Scarabeo del Tempo:** «Sì, sto aspettando…» +**Time Beetle:** Yes, I'm waiting... -Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), o un altro strumento di chatbot online per generare un piano per la costruzione del faro di Alessandria. +Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), or another online chatbot tool to generate a plan for building the lighthouse in Alexandria. > [!TIP] -> Cerca di far generare al LLM un piano che includa istruzioni passo-passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per avere una guida. +> Try to have the LLM generate a plan that includes step-by-step instructions for building the lighthouse. Need help? Check out the solution for guidance. -## Soluzione +## Solution -[Soluzione](./solution/solution.md) +[Solution](/lessons/01-intro-to-genai/solution/solution.md) -### Verifica delle conoscenze +### Knowledge Check -**Domanda:** Quali delle seguenti affermazioni sull’IA generativa e su JavaScript sono vere? +**Question:** Which of the following statements about Generative AI and JavaScript are true? -A. Le app di IA Generativa basate su JavaScript possono generare solo testo. -B. JavaScript può essere utilizzato per creare applicazioni basate sull’IA, tra cui chatbot, strumenti di generazione di testo e altro ancora. -C. Python è l’unico linguaggio utilizzato per lo sviluppo dellvIA. +A. JavaScript powered Generative AI apps can only generate text. +B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more. +C. Python is the only language used for AI development. -[Soluzione del quiz](./solution/solution-quiz.md) +[Quiz solution](/lessons/01-intro-to-genai/solution/solution-quiz.md) -## Risorse per l’autoapprendimento +## Self-Study Resources -- [Serie di video JavaScript sull’IA Generativa](https://aka.ms/genai-js) +- [Generative AI JavaScript video series](https://aka.ms/genai-js) From 7b66b064a295231da9817654f2c13c3c40a9a73d Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Fri, 10 Oct 2025 20:34:23 +0200 Subject: [PATCH 14/22] chore: complete Lesson 1 translation --- .../translations/README.it.md | 260 +++++++++--------- 1 file changed, 131 insertions(+), 129 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index f9b89c97..7e4ed7fb 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -18,9 +18,7 @@ _Questo video offre un'introduzione all'IA generativa con JavaScript_ 💼 Slide: [Introduzione all'IA generativa](/videos/slides/00-intro.pptx) -## IA Generativa - -By now, you've likely heard of tools like ChatGPT or Generative AI. The concept is simple: you provide a prompt, and a model—often called a Large Language Model (LLM)—generates a paragraph or even an entire page of text. This output can be used for various purposes, including creative writing, answering questions, and coding. +## IA generativa Probabilmente avrete già sentito parlare di strumenti come ChatGPT o AI generativa. Il concetto è semplice: si fornisce un prompt e un modello, spesso chiamato Large Language Model (LLM), genera un paragrafo o addirittura un'intera pagina di testo. Questo output può essere utilizzato per vari scopi, tra cui la scrittura creativa, rispondere a domande e il coding. @@ -28,7 +26,7 @@ Inoltre, l'IA generativa si è evoluta in capacità multimodali, consentendo di *In poche parole, le interfacce in linguaggio naturale stanno diventando il nuovo standard per molte app e i tuoi utenti si aspettano di poterle usare.* -## Narrazione: Un viaggio attraverso il tempo +## Storia: "Un viaggio attraverso il tempo" > [!NOTE] > Cominciamo con una panoramica della storia, una storia che collega il passato al futuro! Man mano che procederai con questo programma di studi, ti imbarcherai in un'avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle menti più brillanti della storia. Insieme affronterete sfide ed esplorerete come l'IA generativa possa rivoluzionare le vostre applicazioni JavaScript. @@ -68,113 +66,113 @@ _Charles Babbage."_ Charles Babbage, il grande matematico e inventore della macchina differenziale, vuole incontrarti. Prendi rapidamente il cappotto ed esci di casa. -After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open. +Dopo una passeggiata di 20 minuti lungo il Tamigi, finalmente arrivi alla biblioteca dove trovi la porta leggermente aperta. -It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls. +All'interno è buio e cupo, l'unica luce filtra attraverso le finestre sporche, proiettando ombre inquietanti sulle pareti. -**You:** "Hello? Mr. Babbage?" +**Tu:** «Permesso? Sig. Babbage?» -As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage. +Mentre i tuoi occhi si abituano alla luce fioca, noti una figura in lontananza che ti saluta con la mano. Ti avvicini a lui, i tuoi passi riecheggiano sul pavimento di legno. La figura diventa più nitida e lo riconosci dalle foto sui giornali: è Charles Babbage. -![Dusty Library](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/library.png) +![Biblioteca polverosa](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/library.png) -### What's This Device? +### Cos'è questo dispositivo? -Just as you step closer, a blinding flash erupts, and he vanishes. +Appena ti avvicini, un lampo accecante esplode e lui svanisce. -Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it. +Sul pavimento è rimasto un piccolo dispositivo metallico che gira su se stesso. Lo raccogli: la sua superficie liscia e fredda emette un leggero ronzio. È diverso da qualsiasi cosa tu abbia mai visto, eppure ti sembra stranamente familiare; percepisci un senso di potere che emana da esso. -It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy. +Assomiglia a un minuscolo scarafaggio, dal design intricato, con tre pulsanti: una freccia su, una freccia giù e un pulsante rosso luminoso. Dal retro spunta una piccola antenna che pulsa di energia. -Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you. +Spinto dalla curiosità, le tue dita si avvicinano al pulsante rosso. Nel momento in cui lo premi, il mondo intorno a te brilla e i colori turbinano violentemente intorno a te. -Then, blackness, and a sense of falling. +Poi, il buio e la sensazione di cadere. -![Time Vortex](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/vortex.png) +![Vortice temporale](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/vortex.png) -### Alexandria 300 BC +### Alessandria, 300 a.C. -You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive. +Ti svegli, disorientato. Man mano che la tua vista si schiarisce, una città antica si dispiega davanti a te: frenetica, vivace e piena di vita. -People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares. +Persone in toga si muovono per le strade, le loro voci si fondono in una sinfonia di dialetti antichi, l'aria è piena del profumo di spezie esotiche e del suono lontano dei mercanti che vendono le loro merci. -![Alexandria 300 BC](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/alexandria.png) +![Alessandria, 300 a.C.](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/alexandria.png) -**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged. +**Tu:** «Sicuramente devo aver battuto la testa», pensi, chiudendo gli occhi e riaprendoli, ma la scena rimane immutata. -Am I stuck in the past? Do I dare press that button again? Before you can decide, a figure approaches you, waving. +«Sono bloccato nel passato? Oserei premere di nuovo quel pulsante?» Prima che tu possa decidere, una figura ti si avvicina, salutandoti con la mano. -### Meeting Dinocrates +### Incontro con Dinocrate -An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow. +Un anziano signore vestito con una toga ti saluta con la mano dai gradini del grande tempio. I suoi capelli bianchi e la barba riflettono la luce del sole, conferendogli un aspetto quasi etereo. -![Dinocrates wearing a toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) +![Dinocrate che indossa una toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) -**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold." +**Dinocrate:** «Benvenuto, viaggiatore», dice calorosamente. «Sono Dinocrates, architetto di questa grande città. Il tuo arrivo era stato predetto.» -**You:** It was? I mean, of course, it was. I'm here to help, I think. +**Tu:** «Davvero? Beh, certo che sì. Sono qui per aiutare, credo.» -**Dinocrates:** Yes, as I was saying, you've been expected for some time now. We have a task that requires your unique skills. +**Dinocrate:** «Sì, come dicevo, ti aspettavamo già da tempo. Abbiamo un compito che richiede le tue abilità uniche.» -**Dinocrates:** "Our ships struggle to navigate the coast—we must build a lighthouse. Do you know anything about them?" +**Dinocrate:** «Le nostre navi hanno difficoltà a navigare lungo la costa: dobbiamo costruire un faro. Ne sai qualcosa?» -**You:** "I'm a mechanic. I build automatons. Let me see what I can do." +**Tu:** «Sono un meccanico. Costruisco automi. Vediamo cosa posso fare.» -### The "Time Beetle" +### Lo "Scarabeo del tempo" -A thought strikes you. Can the device understand me if I speak to it? +Ti viene in mente un pensiero. «Il dispositivo può capirmi se gli parlo?» -**You:** "Device, can you understand me?" +**Tu:** «Dispositivo, riesci a capirmi?» -**Device:** "Of course. What do you need?" +**Dispositivi:** «Certo. Che cosa ti serve?» -**You:** "Can you help me build a lighthouse?" +**Tu:** «Puoi aiutarmi a costruire un faro?» -**Device:** "Certainly. That won’t be a problem." +**Dispositivo:** «Certo. Non sarà un problema.» -**You:** "Do you have a name?" +**Tu:** «Hai un nome?» -**Device:** "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle." +**Dispositivo:** «Sono lo Scarabeo del tempo. Il mio creatore mi chiama George, dice che è un bel nome per uno scarabeo.» -**You:** You're right, George is a good name, it was my father's name in fact. +**Tu:** «Hai ragione: George è proprio un bel nome, infatti è stato il nome di mio padre.» -![Time Beetle](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) +![Scarabeo del tempo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) -_Time device, “George” the metallic beetle_ +_Dispositivo temporale, “George” lo scarabeo metallico_ > [!NOTE] -> In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub. +> Nel 300 a.C., Alessandria era una fiorente città fondata da Alessandro Magno nel 331 a.C. Divenne rapidamente una delle più grandi città del mondo ellenistico. Progettata dall'architetto capo di Alessandro, Dinocrate, divenne un importante porto e centro culturale. > -> Alexandria was known for its impressive structures, including the Pharos (lighthouse), one of the Seven Wonders of the Ancient World, and the legendary Library of Alexandria. The city’s strategic location made it a key center for trade and knowledge exchange. +> Alessandria era famosa per le sue imponenti costruzioni, tra cui il Faro, una delle sette meraviglie del mondo antico, e la leggendaria Biblioteca di Alessandria. La posizione strategica della città la rese un centro fondamentale per il commercio e lo scambio di conoscenze. > -> Under the Ptolemaic Kingdom, which followed Alexander’s death, Alexandria grew into one of the most prosperous and influential cities of its time. +> Sotto il regno tolemaico, che seguì la morte di Alessandro, Alessandria divenne una delle città più prospere e influenti dell'epoca. ## Interagisci con Dinocrate -If you want to interact with Dinocrates, run the [Characters](/app/README.md) app. +Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). > [!IMPORTANT] -> This is entirely fictional; the responses are generated by AI. -> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) +> Questo è interamente frutto di fantasia: le risposte sono generate dall'intelligenza artificiale. +> [Dichiarazione di responsabilità sull'IA](../../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) +![Dinocrate che indossa una toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) -**Steps**: +**Step**: -1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) -2. Navigate to _/app_ in the repo root. -3. Locate the console and run `npm install` followed by `npm start`. -4. Once it appears, select the "Open in Browser" button. -5. Chat with Dinocrates. +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta visualizzato, seleziona il pulsante "Open in Browser". +5. Chatta con Dinocrate. > [!NOTE] - > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. + > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. -### Code Sneak Peek +### Anteprima del codice -While there is still a lot more to cover in this Generative AI curriculum, let's take a quick peek at the AI code to begin learning about using JavaScript with AI. +Sebbene ci sia ancora molto da trattare in questo programma di studi sull'IA generativa, diamo un'occhiata veloce al codice IA per iniziare a imparare a usare JavaScript con l'IA. -Inside of `/app/app.js` you'll find an `app.post`function that handles the Generative AI functionality. It's shown next: +All'interno di `/app/app.js` troverai una funzione `app.post` che gestisce la funzionalità di AI generativa. È mostrata di seguito: ```JavaScript app.post('/send', async (req, res) => { @@ -214,138 +212,142 @@ app.post('/send', async (req, res) => { }); ``` -Here's a step-by-step summary of what the function does: +Ecco una sintesi passo-passo di ciò che fa la funzione: -1. **Extract Message from Request**: The function extracts the message from the request body (req.body). -2. **Create Prompt Array**: It constructs an array of messages, including a system message and the user's prompt message. -3. **Initialize OpenAI Client**: An OpenAI client is initialized with the base URL and API key from environment variables. A _gpt-4o-mini_ model from [GitHub Models](https://github.com/marketplace/models) is used to process the prompt and return a response. -4. **Send Prompt to OpenAI**: The function logs the prompt and sends it to the OpenAI API to generate a completion. -5. **Handle Response**: If successful, the function responds with the prompt and the completion's answer. -6. **Error Handling**: If an error occurs, it responds with a 500 status and the error message. +1. **Estrae il messaggio dalla richiesta**: La funzione estrae il messaggio dal corpo della richiesta (req.body). +2. **Crea un array di prompt**: Costruisce una serie di messaggi, tra cui un messaggio di sistema e il messaggio di prompt dell'utente. +3. **Inizializza il client di OpenAI**: Un client OpenAI viene inizializzato con l'URL di base e la chiave API dalle variabili di ambiente. Per elaborare il prompt e restituire una risposta viene utilizzato un modello _gpt-4o-mini_ di [GitHub Models](https://github.com/marketplace/models). +4. **Invia il prompt a OpenAI**: La funzione registra il prompt e lo invia all'API di OpenAI per generare una completion. +5. **Gestione della risposta**: In caso di esito positivo, la funzione risponde con il prompt e la risposta della completion. +6. **Gestione degli errori**: Se si verifica un errore, risponde con uno stato 500 e il messaggio di errore. -> **Note**: [GitHub Copilot](https://github.com/features/copilot) was used to generate this code summary. Generative AI in action! +> **Nota**: [GitHub Copilot](https://github.com/features/copilot) è stato utilizzato per generare questo riassunto del codice. L'IA generativa in azione! -### What Can Generative AI Do for Me and My Apps? +### Cosa può fare l'IA generativa per me e per le mie app? > [!NOTE] -> You've probably figured out by now that the time beetle works like an AI assistant that you can interact with using natural language, written or spoken. +> Probabilmente avrai già capito che lo Scarabeo del tempo funziona come un assistente AI con cui puoi interagire utilizzando il linguaggio naturale, scritto o parlato. -As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you. +Man mano che la tua avventura ad Alessandria prende forma, inizi a intravedere le possibilità offerte dalla combinazione di creatività, ingegnosità e strumenti all'avanguardia per risolvere le sfide e trasformare il mondo che ti circonda. -**You:** Tell me more about lighthouses, you say to your device. +**Tu:** «Dimmi di più sui fari», dici al tuo dispositivo. -**Time Beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor. +**Scarabeo del tempo:** «Un faro è una torre dotata di una luce intensa nella parte superiore, situata vicino alla costa per guidare le navi in mare. La luce funge da ausilio alla navigazione, aiutando i marinai a evitare scogli e reef pericolosi e a raggiungere il porto in sicurezza.» -Dinocrates overhears your conversation and adds: +Dinocrate ascolta di nascosto la vostra conversazione e aggiunge: -**Dinocrates:** We need a lighthouse to guide our ships safely into the harbor. The seas can be treacherous, and many ships have been lost to the rocks. We need a beacon of light to guide them home. +**Dinocrate:** «Abbiamo bisogno di un faro che guidi le nostre navi in modo sicuro nel porto. Il mare può essere insidioso e molte navi sono andate perdute sugli scogli. Abbiamo bisogno di un faro che le guidi a casa.» -#### Generative AI application areas +#### Aree di applicazione dell'IA generativa -**You:** Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps? +**Tu:** «I fari sembrano sicuramente un argomento interessante, ma cos'altro può fare l'IA generativa per me e le mie app?» -**Time Beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples: +**Scarabeo del tempo:** «Nel XXI secolo, l'IA generativa ha rivoluzionato molti settori, dall'assistenza sanitaria alla finanza, all'intrattenimento. Ecco alcuni esempi. -- **Chatbot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience. +- **Chatbot**: un chatbot in grado di generare risposte simili a quelle umane alle domande degli utenti. Anziché una pagina statica di FAQ, gli utenti possono interagire con un chatbot che fornisce risposte dinamiche. Ciò rende l'esperienza utente più coinvolgente e meno frustrante. -- **Assistants and Agents** Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously. +- **Assistenti e agenti**: gli assistenti e gli agenti possono eseguire istruzioni più avanzate, come l'utilizzo di strumenti per richiamare API, eseguire codice, generare immagini e altro ancora. Gli agenti più avanzati possono perseguire obiettivi e svolgere compiti in modo autonomo. -- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale. +- **Uno strumento per la creazione di contenuti**: uno strumento per generare post per blog e social media. Immagina di poter creare campagne in pochi minuti, anziché in ore, quando un sito di e-commerce organizza i saldi del Black Friday. -- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks. +- **Completamento del codice**: uno strumento di completamento del codice in grado di generare frammenti di codice in base all'input dell'utente. Ciò può consentire agli sviluppatori di risparmiare molto tempo, soprattutto quando lavorano su attività ripetitive. -- **Translation** – Translate text between languages with high accuracy. +- **Traduzione**: tradurre testi tra lingue diverse con elevata precisione. -As you can see, these improvements can both help the front office and the back office of your app and company. +Come puoi vedere, questi miglioramenti possono aiutare sia il front-office che il back-office della tua app e della tua azienda.» -Here's an example of a "chatbot application" in action: +Ecco un esempio di "applicazione chatbot" in azione: -![Image of chat app](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) +![Immagine di una app di chat](https://camo.githubusercontent.com/76f2ad7cd754a2de2b9957d2070448e130e5ba228084b9b4b128e3af9c9f5239/68747470733a2f2f6c6561726e2e6d6963726f736f66742e636f6d2f656e2d75732f73656d616e7469632d6b65726e656c2f6d656469612f636861742d636f70696c6f742d696e2d616374696f6e2e676966) -**You:** Fascinating, I'll make a note of going to the 21st century to see how these tools are used. +**Tu:** «Affascinante, prenderò nota di andare nel XXI secolo per vedere come vengono utilizzati questi strumenti.» -### Generative AI and the JavaScript ecosystem +### IA generativa ed ecosistema JavaScript -**Time Beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following: +**Scarabeo del tempo:** «Un modo molto diffuso per sviluppare app nel XXI secolo è l'uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema che comprende il linguaggio stesso, librerie e framework, supporto della comunità, IDE e strumenti. Nell'ecosistema di un linguaggio di programmazione, solitamente si parla dei seguenti elementi.» -| What | Description | +| Elemento | Descrizione | |---|---| -| The programming language itself | Including its syntax and features. | -| Libraries and frameworks | Available libraries to interact with the generative AI models. | -| Community supporting the language| Community matters, especially when trying to learn something new. The community around libraries and frameworks helps decide what libraries to use. It also affects how easy it is to find help when you're stuck. | +| Il linguaggio di programmazione stesso | Compresa la sua sintassi e le sue caratteristiche. | +| Librerie e framework | Librerie disponibili per interagire con i modelli di IA generativa. | +| Comunità che supporta il linguaggio | La comunità è importante, soprattutto quando si cerca di imparare qualcosa di nuovo. La comunità che ruota attorno alle librerie e ai framework aiuta a decidere quali librerie utilizzare. Influisce anche sulla facilità con cui è possibile trovare aiuto quando ci si trova in difficoltà. | -**You:** Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage? +**Tu:** «Interessante, credo di aver sentito parlare di programmazione. Non sono stati Ada Lovelace e Charles Babbage a sperimentarla?» -**Time Beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age. +**Scarabeo del tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l'inventore del motore differenziale, un computer meccanico. Sono stati pionieri nel campo dell'informatica, gettando le basi per l'era digitale.» -**You:** Were? What do you mean were? I just got a letter from Charles Babbage. +**Tu:** «Erano? Cosa intendi con “erano”? Ho appena ricevuto una lettera da Charles Babbage.» -**Time Beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can. +**Scarabeo del tempo:** «Diciamo solo che ti trovi in una posizione privilegiata che ti permette di interagire con personaggi storici in un modo che pochi altri possono permettersi.» -### JavaScript Ecosystem +### Ecosistema JavaScript -**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems? +**Tu:** «Quindi, hai parlato di ecosistemi, sto solo prendendo appunti, ma che mi dici di JavaScript e in che modo è diverso dagli altri ecosistemi?» -**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular: +**Scarabeo del tempo:** «JavaScript è uno dei linguaggi di programmazione più popolari al mondo nel XXI secolo. Ecco alcuni motivi della sua popolarità.» -| What | Description | +| Motivo | Descrizione | |-|-| -| Potential for full-stack development | JavaScript is one of the few languages that can be used for both front-end and back-end development. | -| Rich library ecosystem | JavaScript has a vast library ecosystem, with frameworks like React, Angular, Vue, and more. There's NPM, the package manager, which is one of the largest package repositories in the world. | -| Strong community support | JavaScript has a large and active community, with many resources available for learning and development. It also just works in the browser, which is a huge advantage. | -| IDEs and tools | JavaScript has a variety of IDEs available, such as Visual Studio Code, WebStorm, and Atom. These IDEs have extensions built by companies and the community helping you with various aspects of development. | -| AI and JavaScript | JavaScript supports AI development with libraries like TensorFlow.js, Brain.js, OpenAI’s APIs, and more enabling developers to integrate machine learning and Generative AI into web and server-side applications. | +| Potenziale per lo sviluppo full-stack | JavaScript è uno dei pochi linguaggi che può essere utilizzato sia per lo sviluppo front-end che back-end. | +| Ricco ecosistema di librerie | JavaScript dispone di un vasto ecosistema di librerie, con framework come React, Angular, Vue e molti altri. Esiste NPM, il gestore di pacchetti, che è uno dei più grandi repository di pacchetti al mondo. | +| Forte supporto della comunità | JavaScript ha una comunità ampia e attiva, con molte risorse disponibili per l'apprendimento e lo sviluppo. Inoltre funziona semplicemente nel browser, il che è un enorme vantaggio. | +| IDE e strumenti | JavaScript dispone di una vasta gamma di IDE, quali Visual Studio Code, WebStorm e Atom. Questi IDE dispongono di estensioni sviluppate da aziende e dalla comunità che consentono di affrontare diversi aspetti dello sviluppo. | +| IA e JavaScript | JavaScript supporta lo sviluppo con librerie come TensorFlow.js, Brain.js, le API di OpenAI e altre ancora, consentendo agli sviluppatori di integrare il machine learning e l'IA generativa nelle applicazioni web e lato server. | -**You:** That's a lot of reasons, sounds like I should bet on JavaScript for my future projects. +**Tu:** «Sono un sacco di motivi, sembra che dovrei puntare su JavaScript per i miei progetti futuri.» -**Time Beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development. +**Scarabeo del tempo:** «Infatti, JavaScript è un linguaggio versatile, anche Python è un linguaggio popolare per lo sviluppo dell'IA.» -**You:** Python, what do snakes have to do with programming? +**Tu:** «Python? Cosa c'entrano i serpenti con la programmazione?» -**Time Beetle:** Let's save that for another time, shall we? +**Scarabeo del tempo:** «Lasciamo questo argomento per un'altra volta, va bene?» -**Time Beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript. +**Scarabeo del tempo:** «Ho spiegato sopra perché JavaScript e il suo ecosistema sono generalmente adatti, ma perché lo sono in modo specifico per l'IA generativa? La risposta è che si tratta di un linguaggio supportato da molti fornitori di servizi cloud e framework e strumenti di IA. Si ritiene inoltre che, sebbene Python possa essere la prima scelta per gli scenari di IA, molti sviluppatori stanno utilizzando JavaScript e 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/) with many preferring [TypeScript](https://www.typescriptlang.org) for new projects. +> **Lo sapevi?** +> Il [62,5% degli sviluppatori dichiara di utilizzare JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) e molti preferiscono [TypeScript](https://www.typescriptlang.org) per i nuovi progetti. -## Assignment – Helping Dinocrates +## Compito - Aiuta Dinocrate -To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented. +Per utilizzare un Large Language Model (LLM) per aiutare Dinocrates con il faro di cui abbiamo parlato in precedenza nella nostra storia, useremo qualcosa chiamato prompt, ovvero una frase che descrive ciò che si desidera. È possibile specificare sia le informazioni necessarie sia il modo in cui si desidera che vengano presentate. -**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates. +**Scarabeo del tempo:** «Cominciamo, utilizziamo un LLM per ricercare come costruire un faro per aiutare Dinocrate.» -**Time Beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria. +**Scarabeo del tempo:**: «Dovrai fornire al LLM (cioè “me”) il contesto su come costruire, con quali strumenti e risorse dovrebbero essere disponibili ai tempi di Alessandria.» -**You:** Ok, tell me more about LLMs. +**Tu:** «Ok, dimmi qualcosa di più sugli LLM.» -**Time Beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant. +**Scarabeo del tempo:** «Gli LLM sono un tipo di modello di IA in grado di generare testi simili a quelli umani sulla base di un determinato prompt. Sono addestrati su enormi quantità di dati e possono generare testi coerenti, creativi e contestualmente pertinenti.» -**Time Beetle:** You probably want to ask me in a better way, so I can give you a better answer, about you know *cough* *cough* Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc. +**Scarabeo del tempo:** «Probabilmente vorrai farmi una domanda più precisa, così potrò darti una risposta più accurata, riguardo a, come dire… *coff* *coff* i fari, Alessandria, 300 a.C., Dinocrate, il Faro di Alessandria, ecc.» -**You:** Got it, add more context to the prompt and then ask you. +**Tu:** «Capito, aggiungo più contesto al prompt e poi ti chiedo.» -**Time Beetle:** Yes, I'm waiting... +**Scarabeo del tempo:** «Sì, sto aspettando…» -Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), or another online chatbot tool to generate a plan for building the lighthouse in Alexandria. +Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/) o un altro strumento di chatbot online per generare un piano per la costruzione del faro di Alessandria. > [!TIP] -> Try to have the LLM generate a plan that includes step-by-step instructions for building the lighthouse. Need help? Check out the solution for guidance. +> Prova a chiedere all'LLM di generare un piano che includa istruzioni passo-passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per ottenere assistenza. -## Solution +## Soluzione -[Solution](/lessons/01-intro-to-genai/solution/solution.md) +[Soluzione](/lessons/01-intro-to-genai/solution/solution.md) -### Knowledge Check +### Verifica delle conoscenze -**Question:** Which of the following statements about Generative AI and JavaScript are true? +**Domanda:** Quali delle seguenti affermazioni relative all'IA generativa e a JavaScript sono vere? A. JavaScript powered Generative AI apps can only generate text. B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more. C. Python is the only language used for AI development. -[Quiz solution](/lessons/01-intro-to-genai/solution/solution-quiz.md) +A. Le app di IA generativa basate su JavaScript possono generare solo testo. +B. JavaScript può essere utilizzato per creare applicazioni basate sull'IA, tra cui chatbot, strumenti di generazione di testo e altro ancora. +C. Python è l'unico linguaggio utilizzato per lo sviluppo dell'IA. + +[Soluzione del quiz](/lessons/01-intro-to-genai/solution/solution-quiz.md) -## Self-Study Resources +## Risorse per lo studio autonomo -- [Generative AI JavaScript video series](https://aka.ms/genai-js) +- [Serie di video su JavaScript e IA generativa](https://aka.ms/genai-js) From 946842f126442c061c3ba6957054cbdf40afcb90 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 11 Oct 2025 08:47:01 +0200 Subject: [PATCH 15/22] fix: update Lesson 1 translation, start Lesson 2 translation --- .../translations/README.it.md | 6 +- .../02-first-ai-app/translations/README.it.md | 103 ++++++++---------- 2 files changed, 48 insertions(+), 61 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 7e4ed7fb..8af0879f 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -325,7 +325,7 @@ Per utilizzare un Large Language Model (LLM) per aiutare Dinocrates con il faro **Scarabeo del tempo:** «Sì, sto aspettando…» -Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/) o un altro strumento di chatbot online per generare un piano per la costruzione del faro di Alessandria. +Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/) o un altro strumento di chatbot online per generare un piano per la costruzione del Faro di Alessandria. > [!TIP] > Prova a chiedere all'LLM di generare un piano che includa istruzioni passo-passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per ottenere assistenza. @@ -338,10 +338,6 @@ Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://cha **Domanda:** Quali delle seguenti affermazioni relative all'IA generativa e a JavaScript sono vere? -A. JavaScript powered Generative AI apps can only generate text. -B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more. -C. Python is the only language used for AI development. - A. Le app di IA generativa basate su JavaScript possono generare solo testo. B. JavaScript può essere utilizzato per creare applicazioni basate sull'IA, tra cui chatbot, strumenti di generazione di testo e altro ancora. C. Python è l'unico linguaggio utilizzato per lo sviluppo dell'IA. diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index ed31bfe1..7428c2ae 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -1,89 +1,84 @@ -# Lezione 2: Scrivi la tua prima app IA +# Lezione 2: Scrivere la tua prima app AI In questo capitolo imparerai a: - configurare il tuo ambiente di sviluppo; -- scrivere una app di base; -- capire i prompt di sistema. +- scrivere un'app di base; +- comprendere i prompt di sistema. ## Configurazione -Se non lo hai già fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). +Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate -[![Guarda un breve video sui Large Language Model](https://img.youtube.com/vi/GQ_2OjNZ9aA/0.jpg)](https://www.youtube.com/watch?v=GQ_2OjNZ9aA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=2) +[![Guarda un breve video sui large language model](https://img.youtube.com/vi/GQ_2OjNZ9aA/0.jpg)](https://www.youtube.com/watch?v=GQ_2OjNZ9aA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=2) -_Questo video ti offre un’introduzione ai modelli IA chiamati “Large Language Model” (LLM), che cosa sono e come puoi usarli per integrare la IA nelle tue app._ +_Questo video offre un'introduzione ai modelli di IA denominati "Large Language Model" (LLM), spiegando che cosa sono e come è possibile utilizzarli per integrare l'IA nelle proprie app._ -*🎥 Clicca sull’immagine sopra per guardare un breve video riguardo i Large Language Model* +*🎥 Clicca sull'immagine qui sopra per guardare un breve video sui large language model* -💼 Slide: [Introduzione ai Large Language Model (LLM)](../../videos/slides/01-llms.pptx) +💼 Slide: [Introduzione ai Large Language Model (LLM)](/videos/slides/01-llms.pptx) -## Storia: Immaginati in una barca su un fiume +## Storia: "Immaginati su una barca su un fiume" - -> [!NOTE] -> _La nostra storia finora: Sei un costruttore di oggetti, un artigiano della Londra del 1860 che ha viaggiato nel tempo utilizzando un misterioso dispositivo chiamato Scarabeo del Tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del faro di Alessandria, una meraviglia dell’ingegneria antica che avete contribuito a creare con un piccolo aiuto da parte di Dinocrate e dello Scarabeo del Tempo._ +> [!NOTE] +> _La nostra storia finora: sei un creatore di cose, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del tempo._ > -> Guarda la [Lezione 1](../01-intro-to-genai/README.it.md) se vuoi seguire la storia dall’inizio e iniziare a conoscere l’IA Generativa. +> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. > [!NOTE] -> Mentre consigliamo di procedere nella storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci saltare direttamente al contenuto tecnico. +> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci passare direttamente al contenuto tecnico. + +Insieme a Dinocrate Together with Dinocrates hai dato gli ultimi ritocchi al Faro di Alessandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea. + +You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors. -Insieme a Dinocrate, hai dato gli ultimi ritocchi al faro di Alessandria. L’imponente struttura brilla alla luce del sole, la sua pietra levigata riflette il Mar Mediterraneo. +### A new adventure -Abbassi lo sguardo sullo Scarabeo del Tempo nella tua mano, la cui superficie metallica è fredda contro il tuo palmo. Stringendo il pugno intorno ad esso, sussurri, «Portami a casa.» Lo scarabeo inizia a brillare, emettendo una soffusa, calda luce e il mondo attorno a te si dissolve in un turbinio di colori. +When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist. -### Una nuova avventura +Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting. -Quando apri gli occhi, il mondo è cambiato. Quando riesci ad alzarti, ti rendi conto di essere in una barca su un fiume. Ti guardi intorno, in lontananza vedi degli edifici, i cui contorni sono offuscati dalla nebbia del mattino. -Guardando intorno alla barca, trovi un lungo remo appoggiato alla fiancata. Afferrandolo, inizi a remare verso gli edifici lontani. Man mano che ti avvicini, gli edifici vengono messi a fuoco: sono antichi, la loro architettura ricorda un dipinto rinascimentale. +!["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) -
- Barca sul fiume, uomo in piedi con la pagaia -
+The question now is, where and when are you this time? -La domanda ora è, dove e quando sei questa volta? +You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly. -Riesci a fissare la barca al molo e inizi a camminare lungo le assi di legno: il suono dei tuoi passi riecheggia dolcemente. +As you walk, you notice a man with a long beard and a hat, digging through a crate of what looks like mechanical parts. His hands move deftly, sorting through gears and springs with practiced ease. -Mentre cammini, noti un uomo con una lunga barba e un cappello che scava in una cassa di quelli che sembrano pezzi meccanici. Le sue mani si muovono abilmente, selezionando ingranaggi e molle con una disinvoltura da esperto. -
- Leonardo Da Vinci in piedi accanto a una cassa nel porto -
+![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) -### Aiutami, Leonardo +### Help me, Leonardo -**Tu:** «Mi scusi, signore, dove mi trovo?» Alza lo sguardo verso di te, con un’evidente confusione negli occhi. Realizzando di stargli parlando in inglese, usi subito il dispositivo che hai in mano e gli chiedi di tradurre per te. +**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate. -**Scarabeo del Tempo:** «Certamente, lo tradurrò nell’italiano del XV secolo. “Dove sono?”» +**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'" -**Uomo anziano:** L’uomo anziano risponde, «Siete a Firenze, signore. E chi siete voi?» +**Old man:** The old man replies, "Siete a Firenze, signore. E chi siete voi?" -**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce, «Dice che ti trovi a Firenze e chiede chi sei.» +**Time Beetle:** The Time Beetle translates, "He says you're in Florence, and asks who you are." -**Tu:** «Digli che sono un artigiano e che sto cercando un lavoro.» +**You:** "Tell him I'm a maker of things, and I'm looking for a place to work." -**Uomo anziano:** «Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci?» +**Old man:** Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci? -**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce, «Chiede se avete sentito parlare di Leonardo da Vinci.» +**Time Beetle:** The Time Beetle translates, "He asks if you've heard of Leonardo da Vinci." -**Tu:** «Certo,» rispondi. «Digli che ne ho sentito parlare e che mi piacerebbe conoscerlo.» +**You:** "Of course," you say. "Tell him I have and I would like to meet him." -**Uomo anziano:** L’uomo anziano sorride, «Allora, seguitemi, vi porterò da lui.» +**Old man:** The old man smiles, "Allora, seguitemi, vi porterò da lui." -**Tu:** Chiedi, «Che cosa ha detto?» +**You:** You ask, "What did he say?" -**Scarabeo del Tempo:** Lo Scarabeo del Tempo risponde, «Dice che ti porterà da Leonardo.» +**Time Beetle:** The Time Beetle responds, "He said he'll take you to Leonardo." ### At the workshop -
- Lenoardos workshop -
+![Leonardos workshop](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-workshop.png) The old man leads you to a large wooden door and you are greeted by the sight of a workshop filled with all sorts of mechanical contraptions. @@ -122,11 +117,9 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app. > [!IMPORTANT] > This is entirely fictional; the responses are generated by AI. -> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer) +> [Responsible AI disclaimer](/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) **Steps**: @@ -139,7 +132,7 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app. For a more detailed explanation of the app, see [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). > [!NOTE] - > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. + > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. ## Development environment setup @@ -409,7 +402,7 @@ This means the majority of tokens can be spent on the input tokens, i.e 128k - 1 I want you to generate recipes for me. ``` -![Demo of tokenizer](./assets/tokenizer.png) +![Demo of tokenizer](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/tokenizer.png) Running `tokenizer` on the sentence above gives us 9 tokens. @@ -461,9 +454,7 @@ Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from **Time Beetle:** Nothing -
- Aerial screw, Leonardo Da Vinci -
+![Aerial screw, Leonardo Da Vinci](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/helicopter.jpg) > [!NOTE] > The aerial screw, also known as the helical air screw, was intended to lift off the ground by compressing air. Leonardo's design featured a large, spiral-shaped rotor made of linen, stiffened with starch, and mounted on a wooden platform. The idea was that a crew of men would run around the platform, turning cranks to rotate the screw rapidly enough to achieve lift @@ -488,9 +479,9 @@ Check out [Sample app](/app/README.md) to get started. ## Solution -[Solution](./solution/solution.md) +[Solution](/lessons/02-first-ai-app/solution/solution.md) -## Knowledge check +## Knowledge Check **Question:** What is the purpose of the context window in generative AI models? Select all that apply. @@ -500,9 +491,9 @@ B. The context window is the number of previous messages that the AI uses to gen C. The context window determines how creative the AI's responses are. -[Quiz solution](./solution/solution-quiz.md) +[Quiz solution](/lessons/02-first-ai-app/solution/solution-quiz.md) -## Self-Study resources +## Self-Study Resources - [Text generation](https://platform.openai.com/docs/guides/text-generation) - [JavaScript library for OpenAI](https://github.com/openai/openai-node/tree/master/examples) From 411ab27e041e3d9ae44f70ec54ab1f0cb5c6acf7 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 11 Oct 2025 15:02:22 +0200 Subject: [PATCH 16/22] chore: add complete Italian translation for Lesson 2, align Lesson 1 translation --- .../translations/README.it.md | 12 +- .../02-first-ai-app/translations/README.it.md | 315 +++++++++--------- 2 files changed, 161 insertions(+), 166 deletions(-) diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 8af0879f..c80b9d53 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -34,7 +34,7 @@ Inoltre, l'IA generativa si è evoluta in capacità multimodali, consentendo di > [!NOTE] > Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci passare direttamente al contenuto tecnico. -Il tuo viaggio inizia nella Londra degli anni '60 dell'Ottocento, dove vestirai i panni di un abile meccanico. Attraverso una serie di avventure avvincenti, affinerai le tue abilità di intelligenza artificiale e sbloccherai soluzioni che trascendono il tempo. +Il tuo viaggio inizia nella Londra degli anni '60 dell'Ottocento, dove vestirai i panni di un abile inventore. Attraverso una serie di avventure avvincenti, affinerai le tue abilità di intelligenza artificiale e sbloccherai soluzioni che trascendono il tempo. ### Nel vortice - Londra 1860 @@ -116,7 +116,7 @@ Un anziano signore vestito con una toga ti saluta con la mano dai gradini del gr **Dinocrate:** «Le nostre navi hanno difficoltà a navigare lungo la costa: dobbiamo costruire un faro. Ne sai qualcosa?» -**Tu:** «Sono un meccanico. Costruisco automi. Vediamo cosa posso fare.» +**Tu:** «Sono un inventore. Costruisco automi. Vediamo cosa posso fare.» ### Lo "Scarabeo del tempo" @@ -157,16 +157,16 @@ Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). ![Dinocrate che indossa una toga](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/dinocrates.png) -**Step**: +**Passaggi**: 1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) 2. Passa a _/app_ nella root del repo. 3. Individua la console ed esegui `npm install` seguito da `npm start`. -4. Una volta visualizzato, seleziona il pulsante "Open in Browser". +4. Una volta comparso, seleziona il pulsante "Open in Browser". 5. Chatta con Dinocrate. > [!NOTE] - > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. ### Anteprima del codice @@ -274,7 +274,7 @@ Ecco un esempio di "applicazione chatbot" in azione: **Tu:** «Interessante, credo di aver sentito parlare di programmazione. Non sono stati Ada Lovelace e Charles Babbage a sperimentarla?» -**Scarabeo del tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l'inventore del motore differenziale, un computer meccanico. Sono stati pionieri nel campo dell'informatica, gettando le basi per l'era digitale.» +**Scarabeo del tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l'inventore del motore differenziale, un computer inventore. Sono stati pionieri nel campo dell'informatica, gettando le basi per l'era digitale.» **Tu:** «Erano? Cosa intendi con “erano”? Ho appena ricevuto una lettera da Charles Babbage.» diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index 7428c2ae..4dc688f5 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -23,156 +23,154 @@ _Questo video offre un'introduzione ai modelli di IA denominati "Large Language ## Storia: "Immaginati su una barca su un fiume" > [!NOTE] -> _La nostra storia finora: sei un creatore di cose, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del tempo._ +> _La nostra storia finora: sei un inventore, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del tempo._ > > Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. > [!NOTE] > Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci passare direttamente al contenuto tecnico. -Insieme a Dinocrate Together with Dinocrates hai dato gli ultimi ritocchi al Faro di Alessandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea. +Insieme a Dinocrate hai dato gli ultimi ritocchi al Faro di Alessandria. L'imponente struttura risplende alla luce del sole e la sua pietra levigata riflette il Mar Mediterraneo. -You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors. +Guardi lo Scarabeo del tempo che hai in mano, la sua superficie metallica fredda contro il palmo. Stringendo il pugno, sussurri: «Portami a casa». Lo scarabeo inizia a brillare, emettendo una luce morbida e calda e il mondo intorno a te si dissolve in un turbine di colori. -### A new adventure +### Una nuova avventura -When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist. +Quando apri gli occhi, il mondo è cambiato. Mentre riesci ad alzarti, ti rendi conto di essere su una barca su un fiume. Ti guardi intorno: in lontananza vedi degli edifici i cui contorni sono sfumati dalla nebbia mattutina. -Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting. +Guardando intorno alla barca, trovi un lungo remo appoggiato al bordo. Afferrandolo, inizi a remare verso gli edifici lontani. Avvicinandoti, gli edifici diventano più nitidi: sono antichi, la loro architettura ricorda un dipinto rinascimentale. +![Barca sul fiume, uomo in piedi con una pagaia](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/boat.png) -!["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) +La domanda è: dove e quando ti trovi questa volta? -The question now is, where and when are you this time? +Riesci ad ormeggiare la barca al molo e inizi a camminare lungo le assi di legno, il suono dei tuoi passi echeggia dolcemente. -You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly. +Mentre cammini, noti un uomo con una lunga barba e un cappello che fruga in una cassa contenente quelli che sembrano componenti meccanici. Le sue mani si muovono abilmente, sistemando ingranaggi e molle con esperta facilità. -As you walk, you notice a man with a long beard and a hat, digging through a crate of what looks like mechanical parts. His hands move deftly, sorting through gears and springs with practiced ease. +![Leonardo Da Vinci in piedi accanto a una cassa nel porto](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo.png) +### Aiutami, Leonardo -![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) +**Tu:** «Mi scusi, signore, dove mi trovo?» Ti guarda, la confusione è evidente nei suoi occhi. Rendendoti conto che stavi parlando in inglese, usi rapidamente il dispositivo che hai in mano e gli chiedi di tradurre. -### Help me, Leonardo +**Scarabeo del tempo:** «Certo, lo tradurrò nell'italiano del XV secolo. "Dove sono?"» -**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate. +**Anziano:** L'anziano risponde: «Siete a Firenze, signore. E chi siete voi?» -**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'" +**Scarabeo del tempo:** Lo Scarabeo del tempo traduce: «Ha detto che ti trovi a Firenze e chiede chi sei.» -**Old man:** The old man replies, "Siete a Firenze, signore. E chi siete voi?" +**Tu:** «Digli che sono un inventore e che sto cercando un posto di lavoro.» -**Time Beetle:** The Time Beetle translates, "He says you're in Florence, and asks who you are." +**Anziano:** «Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci?» -**You:** "Tell him I'm a maker of things, and I'm looking for a place to work." +**Scarabeo del tempo:** Lo Scarabeo del tempo traduce: «Chiede se hai mai sentito parlare di Leonardo da Vinci.» -**Old man:** Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci? +**Tu:** «Certo», rispondi. «Digli che ne ho sentito parlare e che mi piacerebbe conoscerlo.» -**Time Beetle:** The Time Beetle translates, "He asks if you've heard of Leonardo da Vinci." +**Anziano:** L'anziano sorride: «Allora seguitemi, vi porterò da lui.» -**You:** "Of course," you say. "Tell him I have and I would like to meet him." +**Tu:** Chiedi: «Che cosa ha detto?» -**Old man:** The old man smiles, "Allora, seguitemi, vi porterò da lui." +**Scarabeo del tempo:** Lo Scarabeo del tempo risponde: «Ha detto che ti porterà da Leonardo.» -**You:** You ask, "What did he say?" +### In officina -**Time Beetle:** The Time Beetle responds, "He said he'll take you to Leonardo." +![Officina di Leonardo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-workshop.png) -### At the workshop +Chiedi allo Scarabeo del tempo di informarsi su dove si trovi Leonardo. -![Leonardos workshop](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-workshop.png) +**Tu:** «Dove è Leonardo?» -The old man leads you to a large wooden door and you are greeted by the sight of a workshop filled with all sorts of mechanical contraptions. +**Anziano:** L'anziano si gira verso di te con un sorriso: «Sono io Leonardo da Vinci. Chi siete voi?» -You ask the Time Beetle to inquire about Leonardo's whereabouts. +Provi un brivido di riconoscimento. -**You:** "Dove è Leonardo?" +**Tu:** «Lo immaginavo. Sono un inventore, fuori dallo spazio e fuori dal tempo.» -**Old man:** The old man turns to you with a smile, "Sono io (that’s me), Leonardo da Vinci. Chi siete voi?", who are you? +**Leonardo:** Gli occhi di Leonardo brillano di curiosità. «Interessante, cosa vi porta qui?» -You feel a thrill of recognition. +Lo Scarabeo del tempo traduce. -**You:** I thought so. I'm a fellow maker, out of place and time." +**Scarabeo del tempo:** «Chiede che cosa ti porti qui.» -**Leonardo:** Leonardo's eyes sparkle with curiosity. "Interessante, cosa vi porta qui?" +**Tu:** «Beh, stavo lavorando a un progetto e sono finito qui.» -The Time Beetle translates. +Gli mostri lo Scarabeo del tempo e i suoi occhi si illuminano di fascino. Lo esamina attentamente, mentre gli spieghi come funziona e come sei finito a Firenze. -**Time Beetle:** "He asks what brings you here." - -**You:** "Well, I was working on a project, and I ended up here." - -You show him the Time Beetle, and his eyes light up with fascination. He examines it closely as you explain how it works and how you ended up in Florence. - -Leonardo looks at you with excitement. +Leonardo ti guarda con entusiasmo. **Leonardo:** You're a maker of things. I have a project that might interest you. I've been working on a machine that can generate text based on verbal input. Would you like to help me with it? Leonardo da Vinci, asking you to help him with a project—you can hardly believe it. You nod eagerly and say: **You:** I would be honored to help you with your project, -"Sarebbe un onore aiutarti con il tuo progetto." +"Sarebbe un onore aiutarti con il tuo progetto." + +**Leonardo:** «Sei un inventore. Ho un progetto che potrebbe interessarti: sto lavorando a una macchina in grado di generare testo in base a input verbali. Ti piacerebbe aiutarmi?» -## Interact with Leonardo +Leonardo da Vinci che ti chiede di aiutarlo con un progetto… stenti a crederci. Annuisci con entusiasmo e dici: -If you want to interact with Leonardo, run the [Characters](/app/README.md) app. +**Tu:** «Sarebbe un onore aiutarti con il tuo progetto.» + +## Interagisci con Leonardo + +Se vuoi interagire con Leonardo, esegui la app [Personaggi](/app/README.md). > [!IMPORTANT] -> This is entirely fictional; the responses are generated by AI. -> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer) +> Questo è interamente frutto di fantasia: le risposte sono generate dall'intelligenza artificiale. +> [Dichiarazione di responsabilità sull'IA](../../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) -**Steps**: +**Passaggi**: 1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) -2. Navigate to _/app/README.md_ in the repo root. -3. Locate the console and run `npm install` followed by `npm start`. -4. Once it appears, select the "Open in Browser" button. -5. Chat with Leonardo. +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante "Open in Browser". +5. Chatta con Leonardo. For a more detailed explanation of the app, see [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). > [!NOTE] - > If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code. - -## Development environment setup +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. -Before you can assist Leonardo with his project, you should first think about the essential "tools of the trade" required to begin helping him effectively. +## Configurazione dell'ambiente di sviluppo -**You:** "Time Beetle, what do I need to get started with this project?" Suggest tools and libraries that I need that can help me build an AI app that you're able to run. +Prima di poter aiutare Leonardo nel suo progetto, dovresti innanzitutto pensare agli "strumenti del mestiere" essenziali necessari per iniziare ad aiutarlo in modo efficace. -**Time Beetle:** I'm compatible with most machines running in the 21st century, see the following list for a set of essential tools and libraries. +**Tu:** «Scarabeo del tempo, di che cosa ho bisogno per iniziare questo progetto? Suggeriscimi gli strumenti e le librerie di cui ho bisogno che possono aiutarmi a creare un'app di IA che tu possa eseguire.» -- **Text editor**, for example Visual Studio Code. -- **Terminal**, for running commands. -- **Browser for testing your app**. It's also a good idea to have a tool like curl or some other HTTP client to test your app's API endpoints. +**Scarabeo del tempo:** «Sono compatibile con la maggior parte delle macchine in funzione nel 21° secolo; consulta l'elenco seguente per un set di strumenti e librerie essenziali.» -- **Node.js**. You also need to install Node.js and npm, which are tools that help you run JavaScript code on your computer. +- **Editor di testo**, per esempio Visual Studio Code. +- **Terminale**, per eseguire i comandi. +- **Browser per testare la tua app**. È anche una buona idea avere uno strumento come cURL o un altro client HTTP per testare gli endpoint API della tua app. +- **Node.js**. Devi anche installare Node.js e npm, strumenti che ti aiutano a eseguire codice JavaScript sul tuo computer. +- **Chiave API**. Avrai bisogno di una chiave API per accedere al modello di IA generativa. Puoi ottenerla dal fornitore del modello, ad esempio OpenAI o Azure OpenAI. -- **API key**. You'll need an API key to access the generative AI model. You can get this from the model provider, for example OpenAI or Azure OpenAI. +**Tu:** «Grazie, Scarabeo del tempo, Immagino che andrai a prenderli in qualche modo da quel web di cui hai parlato?» -**You:** Thank you, Time Beetle, I guess you'll go get those somehow from that Web you spoke about? +**Time Beetle:** «Sì, li ho già presi» dice e proietta una tastiera e uno schermo sul muro di fronte a te. -**Time Beetle:** Yes, I already have those it says and projects a keyboard and screen on the wall in front of you. +## Scrivere una app di base -## Writing a basic app +**Tu:** «Dimmi di più sulla scrittura vera e propria della app: come posso iniziare?» -**You:** Tell me more about the actual writing of the app, how do I get started? +**Scarabeo del tempo:** «Certo! Per scrivere un'app, nella sua forma più semplice, si tratta di inviare una richiesta a un'API e visualizzarne la risposta. Analizziamolo nel dettaglio.» -**Time Beetle:** Of course, to write an app, at its simplest it's about sending a request to an API and displaying the response. Let's break it down: +- **Input**: In un'app di generazione di testo di base, l'input si riferisce al testo iniziale da cui si desidera espandere o sviluppare la app. Questo input può essere fornito dall'utente durante l'esecuzione o preimpostato (hardcoded) all'interno dell'app stessa. Per ora, inizieremo utilizzando il testo hardcoded come input. +- **Richiesta API**: È necessario inviare una richiesta all'API del modello di IA generativa con il testo di input. Questa operazione viene eseguita utilizzando la funzione fetch in JavaScript (Node.js). In questa richiesta dovrebbe essere inclusa anche la chiave API. Per motivi di sicurezza, si consiglia di non inserire la chiave API hardcoded nell'app, ma di utilizzare variabili di ambiente. Inoltre, se si utilizza un provider come Azure, si consiglia di valutare l'identità gestita, poiché è considerata un modo più sicuro per accedere alle risorse. Con l'identità gestita è possibile assegnare autorizzazioni più granulari alla propria app. Il vantaggio principale è che il provider cloud si occupa dell'autenticazione per conto dell'utente. +- **Risposta**: L'API restituirà una risposta con il testo generato. È necessario estrarre questo testo dalla risposta e mostrarlo all'utente. -- **Input**: In a basic text generation app, the input refers to the initial text that you want the app to expand or build upon. This input can either be provided by the user during runtime or pre-set (hardcoded) within the app itself. For now, we’ll begin by using hardcoded text as the input. +**Tu:** «Sembra abbastanza semplice, puoi illustrarmi uno scenario che avrebbe senso data la situazione in cui ci troviamo?» -- **API request**: You need to send a request to the generative AI model API with the input text. This is done using the fetch function in JavaScript (Node.js). Included in this request should also be your API key. It's recommended as you consider security to not hardcode the API key in your app but rather use environment variables. Additionally, consider looking into managed identity if you're using a provider like Azure as it's considered a more secure way to access resources. With managed identity you can assign more granular permissions to your app. The best part is that the cloud provider takes care of the authentication for you. +**Scarabeo del tempo:** «Certo, vediamo come possiamo creare una semplice app che generi testo in italiano partendo da un input in inglese.» -- **Response**: The API will return a response with the generated text. You need to extract this text from the response and display it to the user. +## La tua prima app: insegnami l'italiano -**You:** That sounds simple enough, can you take me through a scenario that would make sense given the situation we're in? - -**Time Beetle:** Sure, let's see how we can build a simple app that generates Italian text based on English input. - -## Your first app - teach me Italian - -**Time Beetle:** Generative AI models can be used for many things, for example, language translation. In fact, it accepts input in one language and can generate text in another language. Let's start with a simple app that takes English input and generates Italian text. +**Scarabeo del tempo:** «I modelli di IA generativa possono essere utilizzati per molti scopi, ad esempio per la traduzione. Infatti, accettano input in una lingua e possono generare testo in un'altra. Iniziamo con una semplice app che accetta input in inglese e genera testo in italiano.» ```javascript @@ -214,32 +212,32 @@ console.log(`Answer for "${question}":`); console.log(completion.choices[0]?.message?.content); ``` -Let's explain what's happening here: +«Spieghiamo cosa sta succedendo qui.» -- Creating the question as 'Hello, how are you?'. This is the text you want to translate to Italian. -- Creating the augmented prompt, which contains the input text and some additional instructions what to do, i.e translate. Note how we're using string interpolation to include the input text in the prompt and how that instruction is to translate the text to Italian. -- Creating the client with properties: - - `model`, what model to use. - - `messages`, the prompt to send to the model. Also note how you set the role to "user" to indicate that the input text is from the user. Had it been from the AI, you would have set the role to "system". -- Extracting the generated text from the response and printing it to the console. +- Creazione della domanda "Hello, how are you?". Questo è il testo che vuoi tradurre in italiano. +- Creazione del prompt aumentato, che contiene il testo di input e alcune istruzioni aggiuntive su cosa fare, ovvero tradurre. Nota come utilizziamo l'interpolazione di stringhe per includere il testo di input nel prompt e come tale istruzione traduca il testo in italiano. +- Creazione del client con le proprietà: + - `model`, quale modello utilizzare. + - `messages`, il prompt da inviare al modello. Nota anche come imposti il ​​ruolo su "user" per indicare che il testo di input proviene dall'utente. Se provenisse dall'IA, avresti impostato il ruolo su "system". +- Estrazione del testo generato dalla risposta e stampa sulla console. -**You:** I think I get it. So if I change the value of the `question` variable to something else, the app will generate a different Italian translation? +**Tu:** «Penso di aver capito. Quindi se io cambio il valore della variabile `question` con qualcos'altro, la app genererà una diversa traduzione in italiano?» -**Time Beetle:** Exactly, you can change the input text to anything you want. Also note how GitHub models are being used as the base URL for the API together with a GitHub token as the API key. +**Scarabeo del tempo:** «Esatto, puoi modificare il testo di input come preferisci. Nota anche come i modelli GitHub vengano utilizzati come URL di base per l'API, insieme a un token GitHub come chiave API.» -**You:** Why is that important? +**Tu:** «Perché è importante?» -**Time Beetle:** It's important to use a base URL and API key that are specific to the model you're using. GitHub Models is a platform that hosts a variety of models, all with different capabilities and features, it's also free to use. +**Scarabeo del tempo:** «È importante utilizzare un URL di base e una chiave API specifici per il modello che si sta utilizzando. GitHub Models è una piattaforma che ospita una varietà di modelli, tutti con funzionalità e caratteristiche diverse, ed è gratuita.» -**You:** Oh good, I don't know who to pay anyways and I doubt they accept my currency here. :) +**Tu:** «Oh cielo, comunque non so chi pagare e dubito che accettino la mia valuta qui. :)» -## Chat apps +## App di chat -**Time Beetle:** Generative AI models can also be used to generate text based on a conversation. You can simulate a conversation with the AI by providing a list of messages as context like the conversation has already happened. +**Scarabeo del tempo:** «I modelli di IA generativa possono essere utilizzati anche per generare testo basato su una conversazione. È possibile simulare una conversazione con l'intelligenza artificiale fornendo un elenco di messaggi come contesto, come se la conversazione fosse già avvenuta.» -**You:** That sounds interesting, but why is that useful? +**You:** «Sembra interessante, ma perché è utile?» -**Time Beetle:** It's useful because it allows the AI to provide a better response based on more context than just a single prompt. Let's look at a conversation below to illustrate this: +**Scarabeo del tempo:** «È utile perché permette alla IA di fornire una risposta migliore basata su più contesto, anziché un singolo prompt. Per illustrare questo concetto, prendiamo in esame la conversazione qui sotto:» ```text @@ -261,11 +259,11 @@ AI: Rome is known for its ancient ruins, art, and vibrant culture. You can visit ``` -**Time Beetle:** Imagine if a sentence like "Tell me more about it" were taken out of context, the AI wouldn't know what "it" refers to. This is where context is important, and this context is something we can provide to the AI model through the prompt. +**Scarabeo del tempo:** «Immagina se una frase come "Tell me more about this" fosse decontestualizzata: l'IA non saprebbe a cosa si riferisce "this". È qui che il contesto è importante e questo contesto è qualcosa che possiamo fornire al modello di IA tramite il prompt.» -**You:** I think I get it, how do I construct a conversation with the AI using this JavaScript language you speak of? +**Tu:** «Credo di aver capito, come faccio a costruire una conversazione con l'intelligenza artificiale usando questo linguaggio JavaScript di cui parli?» -**Time Beetle:** Below is how we can construct a conversation with the AI: +**Time Beetle:** «Qui di seguito è illustrato come possiamo costruire una conversazione con l'IA.» ```javascript @@ -316,23 +314,23 @@ console.log(completion.choices[0]?.message?.content); ``` -Now the AI will provide a list of chat messages as context, and the AI will generate a response based on that context. This is a more interactive way to use generative AI models and can be used in chatbots, customer service applications, and more. +Ora l'IA fornirà un elenco di messaggi di chat come contesto e genererà una risposta basata su tale contesto. Questo è un modo più interattivo di utilizzare modelli di IA generativa e può essere utilizzato in chatbot, applicazioni di assistenza clienti e altro ancora. -**You:** Ok, so if I understand the conversation correctly, the AI will now have the following context: _I'm going to Rome next month_, so based on that it should filter out irrelevant information and provide a more relevant response? +**Tu:** «Ok, quindi se ho capito bene la conversazione, l'IA avrà ora il seguente contesto: _I'm going to Rome next month_, quindi in base a questo dovrebbe filtrare le informazioni irrilevanti e fornire una risposta più pertinente?» -**Time Beetle:** Exactly, the AI will use the context to generate a response that is more relevant to the conversation. +**Scarabeo del tempo:** «Esatto, l'IA utilizzerà il contesto per generare una risposta più pertinente alla conversazione.» -## Improving the chat conversation with a system message +## Migliorare la conversazione in chat con un messaggio di sistema -**You:** I see, but is there a way to improve this further? +**Tu:** «Capisco, ma c'è un modo per migliorare ulteriormente la situazione?» -**Time Beetle:** Yes, you can add a system message to the conversation. A system message creates a "personality" for the AI and can be used to provide additional context. +**Scarabeo del tempo:** «Sì, puoi aggiungere un messaggio di sistema alla conversazione. Un messaggio di sistema crea una "personalità" per l'IA e può essere utilizzato per fornire ulteriore contesto.» -**You:** Ok, so in the context of the conversation we've been having, what would a system message look like? +**Tu:** «Ok, quindi nel contesto della conversazione che abbiamo avuto, come apparirebbe un messaggio di sistema?» -**Time Beetle:** A system message for this conversation could be something like _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ This message sets the tone for the conversation and helps the AI understand its role in the interaction. +**Scarabeo del tempo:** «Un messaggio di sistema per questa conversazione potrebbe essere qualcosa del tipo _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ Questo messaggio stabilisce il tono della conversazione e aiuta l'IA a comprendere il suo ruolo nell'interazione.» -To create such a message, ensure it has the type "developer" like so: +Per creare un messaggio di questo tipo, assicurati che abbia il tipo "developer" in questo modo: ```javascript const message = { @@ -342,21 +340,21 @@ const message = { ``` > [!NOTE] -> This used to be called "system". This is a recent change and "developer" is the new term for it. For some models this is still called "system", so if you have any issues use "system". +> In passato si chiamava "system". Si tratta di una modifica recente e il nuovo termine è "developer". Per alcuni modelli si chiama ancora "system", quindi in caso di problemi usa "system". -**You:** Ok, great, I'll make sure to include a system message in my chat conversations. Out of curiosity, what does a system message look like for you? +**Tu:** «Ok, perfetto, mi assicurerò di includere un messaggio di sistema nelle mie conversazioni in chat. Per curiosità, come si presenta un messaggio di sistema per te?» -**Time Beetle:** A system message for me could be something like _"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."_ +**Scarabeo del tempo:** «Un messaggio di sistema per me potrebbe essere qualcosa del tipo _"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."»_ -### Creating varied responses with the temperature setting +### Creazione di risposte diverse con l'impostazione della temperatura -**You:** Anything else I should know about chat conversations? +**Tu:** «C'è qualcos'altro che dovrei sapere sulle conversazioni in chat?» -**Time Beetle:** Yes, you can adjust the "temperature" of the AI's responses. The temperature is a variable with a value normally set between 0 and 1 that determines how creative the AI's responses are. A temperature of 0 will result in more predictable responses, while a temperature of 1 will result in more creative and varied responses. You can adjust the temperature based on the context of your conversation and the type of responses you want from the AI. Note, it's possible to set a value higher than 1 but that leads to more randomness and less coherence in the responses. +**Scarabeo del tempo:** «Sì, puoi regolare la "temperatura" delle risposte dell'IA. La temperatura è una variabile con un valore normalmente impostato tra 0 e 1 che determina il livello di creatività delle risposte dell'IA. Una temperatura pari a 0 si tradurrà in risposte più prevedibili, mentre una temperatura pari a 1 si tradurrà in risposte più creative e varie. Puoi regolare la temperatura in base al contesto della conversazione e al tipo di risposte che desideri dall'IA. Nota: è possibile impostare un valore superiore a 1, ma ciò comporta una maggiore casualità e una minore coerenza nelle risposte.» -**You:** So if I set the temperature to 0, the AI will provide more predictable responses, and if I set it to 1, the AI will provide more creative responses? What temperature do you have? +**Tu:** «Quindi se imposto la temperatura a 0, l'IA fornirà risposte più prevedibili, mentre se la imposto a 1, l'IA fornirà risposte più creative? Che temperatura hai tu?» -**Time Beetle:** I have a temperature of 0.7 and yes, you're correct, the AI will provide more creative responses with a higher temperature. Let's see how you can set the temperature in your app: +**Scarabeo del tempo:** «Ho una temperatura di 0,7 e sì, hai ragione, l'IA fornirà risposte più creative con una temperatura più alta. Vediamo come puoi impostare la temperatura nella tua app:» ```javascript @@ -379,36 +377,36 @@ const completion = await openai.chat.completions.create({ }); ``` -As you can see, you can adjust the temperature based on the context of your conversation and the type of responses you want from the AI. This is a powerful feature that allows you to customize the level of creativity in the AI's responses. +Come puoi vedere, puoi regolare la temperatura in base al contesto della conversazione e al tipo di risposte che desideri dall'IA. Questa è una funzionalità potente che ti permette di personalizzare il livello di creatività nelle risposte dell'IA. -## Context window +## Finestra di contesto -**You:** There's more right? +**Tu:** «C'è dell'altro, giusto?» -**Time Beetle:** Yes, another important concept in generative AI models is the context window. The context window is the number of previous messages that the AI uses to generate a response. A larger context window allows the AI to consider more context and generate more coherent responses. +**Scarabeo del tempo:** «Sì, un altro concetto importante nei modelli di intelligenza artificiale generativa è la finestra di contesto. La finestra di contesto è il numero di messaggi precedenti che l'intelligenza artificiale utilizza per generare una risposta. Una finestra di contesto più ampia consente all'intelligenza artificiale di considerare più contesto e generare risposte più coerenti.» -**Time Beetle:** Different models have different limits to output tokens. Take the following model as example `gpt-4o-2024-08-06` it has the following specifications: +**Scarabeo del tempo:** «Modelli diversi hanno limiti diversi per i token in uscita. Prendiamo come esempio il modello `gpt-4o-2024-08-06`, che ha le seguenti specifiche.» -- Maximum output tokens: roughly 16k tokens. -- Maximum context window size: 128k. +- Numero massimo di token in uscita: circa 16k. +- Dimensione massima della finestra di contesto: 128k. -This means the majority of tokens can be spent on the input tokens, i.e 128k - 16k = 112k tokens. +«Ciò significa che la maggior parte dei token può essere spesa sui token di input, ovvero 128k - 16k = 112k token.» -**You:** Got it, context window, tokens, how much is a token though? +**Tu:** «Capito: finestra di contesto, token… quanto costa un token?» -**Time Beetle:** A token is a word or a part of a word and differs slightly by language. There's a tool you can use to measure that's recommended by OpenAI, it's called [tokenizer](https://platform.openai.com/tokenizer). Let's try a sentence and see how many tokens it is: +**Scarabeo del tempo:** «Un token è una parola o una parte di parola e varia leggermente a seconda della lingua. Esiste uno strumento di misurazione consigliato da OpenAI, chiamato [tokenizer](https://platform.openai.com/tokenizer). Proviamo a scrivere una frase e vediamo quanti token contiene.» ```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) +![Demo di tokenizer](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/tokenizer.png) -Running `tokenizer` on the sentence above gives us 9 tokens. +Eseguendo `tokenizer` sulla frase qui sopra abbiamo generato 9 token. -**You:** That wasn't much, sounds like I can have a lot of tokens in my context window then? +**Tu:** «Non è molto, quindi sembra che potrei avere molti token nella mia finestra di contesto?» -**Time Beetle:** Yes, you can experiment with different context window sizes to see how it affects the AI's responses. In fact, if you set a context window size of 100, you will limit the AI and how much it considers for input and output. Here's how you can set the context window in your app: +**Time Beetle:** «Sì, puoi sperimentare diverse dimensioni della finestra di contesto per vedere come influiscono sulle risposte dell'IA. Infatti, impostando una dimensione della finestra di contesto pari a 100, limiterai l'IA e la quantità di dati che considera per input e output. Ecco come puoi impostare la finestra di contesto nella tua app.» ```javascript @@ -434,66 +432,63 @@ const completion = await openai.chat.completions.create({ ``` > [!TIP] -> Experiment with different context window sizes to see how it affects the AI's responses. +> Sperimenta diverse finestre di contesto per vedere come cambiano le risposte dell'IA. -## Assignment - Building an engineering assistant +## Compito - Costruire un assistente tecnico -Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from all sides, even shook it. +Leonardo chiede improvvisamente di poter esaminare più da vicino lo Scarabeo del Tempo, lo guarda da tutti i lati, lo scuote perfino. -**Leonardo:** I need an assistant that can help me with the calculations and design of the aerial screw. Can you build me an assistant that can do that? +**Leonardo:** «Ho bisogno di un assistente che mi aiuti con i calcoli e la progettazione della vite aerea. Puoi costruirmi un assistente che possa farlo?» -**You:** Of course, I can build that for you. Time Beetle, we can help with that right? +**Tu:** «Certo, posso costruirtelo. Scarabeo del tempo, possiamo aiutarlo, vero?» -**Time Beetle:** Yes, not a problem, in fact the aerial screw is one of Leonardo's most fascinating and visionary inventions. Designed in the late 1480s... +**Scarabeo del tempo:** «Sì, nessun problema, anzi, la vite aerea è una delle invenzioni più affascinanti e visionarie di Leonardo. Progettata alla fine degli anni '80 del Quattrocento…» -**You:** All I needed was a yes, let's save the lecture for later. +**Tu:** «Tutto ciò di cui avevo bisogno era un sì, teniamo la lezione per dopo.» -**Time Beetle:** Rude.. +**Scarabeo del tempo:** «Maleducato…» -**You:** What? +**Tu:** «Cosa?» -**Time Beetle:** Nothing +**Scarabeo del tempo:** «Niente» -![Aerial screw, Leonardo Da Vinci](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/helicopter.jpg) +![Vite aerea, Leonardo da Vinci](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/helicopter.jpg) > [!NOTE] -> The aerial screw, also known as the helical air screw, was intended to lift off the ground by compressing air. Leonardo's design featured a large, spiral-shaped rotor made of linen, stiffened with starch, and mounted on a wooden platform. The idea was that a crew of men would run around the platform, turning cranks to rotate the screw rapidly enough to achieve lift +> La vite aerea, nota anche come vite elicoidale, era progettata per sollevare da terra comprimendo l'aria. Il progetto di Leonardo prevedeva un grande rotore a spirale in lino, irrigidito con amido e montato su una piattaforma di legno. L'idea era che un gruppo di uomini corresse intorno alla piattaforma, azionando delle manovelle per far ruotare la vite abbastanza rapidamente da ottenere la portanza. > -> Although Leonardo never built a full-scale version of the aerial screw, his sketches and notes provide detailed insights into how he envisioned it working. He believed that if the screw was turned quickly enough, it would push against the air and lift the entire structure off the ground. +> Sebbene Leonardo non abbia mai costruito una versione a grandezza naturale della vite aerea, i suoi schizzi e appunti forniscono informazioni dettagliate su come ne immaginava il funzionamento. Credeva che se la vite fosse stata ruotata abbastanza velocemente, avrebbe spinto contro l'aria e sollevato l'intera struttura da terra. > -> However, modern scientists agree that the materials available in Leonardo's time were not strong or light enough to make this possible +> Tuttavia, gli scienziati moderni concordano sul fatto che i materiali disponibili all'epoca di Leonardo non fossero sufficientemente resistenti o leggeri per rendere ciò possibile. > -> Despite its impracticality, the aerial screw remains a testament to Leonardo's genius and his relentless pursuit of innovation. It laid the groundwork for future developments in aviation and continues to inspire engineers and inventors to this day. -> [Read more](https://en.wikipedia.org/wiki/Leonardo%27s_aerial_screw) - -Your assignment is to build an engineering assistant that can help Leonardo with the calculations and design of the aerial screw. +> Nonostante la sua impraticabilità, la vite aerea rimane una testimonianza del genio di Leonardo e della sua instancabile ricerca dell'innovazione. Ha gettato le basi per i futuri sviluppi dell'aviazione e continua a ispirare ingegneri e inventori ancora oggi. +> [Leggi tutto](https://en.wikipedia.org/wiki/Leonardo%27s_aerial_screw) -- It should be able to generate text based on user input. +Il tuo compito è creare un assistente tecnico che possa aiutare Leonardo nei calcoli e nella progettazione della vite aerea. -- You should set a system message to introduce the assistant. - -Check out [Sample app](/app/README.md) to get started. - -> [!TIP] -> Consider what the system message should be and what input you should provide. +- Dovrebbe essere in grado di generare testo in base all'input dell'utente. +- Dovresti impostare un messaggio di sistema per introdurre l'assistente. -## Solution +Dai un'occhiata alla [App di esempio](/app/README.md) per iniziare. -[Solution](/lessons/02-first-ai-app/solution/solution.md) +> [!TIP] +> Considera quale dovrebbe essere il messaggio di sistema e quale input dovresti fornire. -## Knowledge Check +## Soluzione -**Question:** What is the purpose of the context window in generative AI models? Select all that apply. +[Soluzione](/lessons/02-first-ai-app/solution/solution.md) -A. The context window allows the AI to consider more context and generate more coherent responses. +## Verifica delle conoscenze -B. The context window is the number of previous messages that the AI uses to generate a response. +**Domanda:** Qual è lo scopo della finestra di contesto nei modelli di IA generativa? Seleziona tutte le risposte pertinenti. -C. The context window determines how creative the AI's responses are. +A. La finestra di contesto consente all'IA di considerare più contesto e generare risposte più coerenti. +B. La finestra di contesto è il numero di messaggi precedenti che l'IA utilizza per generare una risposta. +C. La finestra di contesto determina il livello di creatività delle risposte dell'IA. -[Quiz solution](/lessons/02-first-ai-app/solution/solution-quiz.md) +[Soluzione del quiz](/lessons/02-first-ai-app/solution/solution-quiz.md) -## Self-Study Resources +## Risorse per lo studio autonomo - [Text generation](https://platform.openai.com/docs/guides/text-generation) - [JavaScript library for OpenAI](https://github.com/openai/openai-node/tree/master/examples) From 6af70e3a846ce5e4d944d5ed2b473e9aeb370522 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 11 Oct 2025 16:53:05 +0200 Subject: [PATCH 17/22] chore: add complete Italian translation for Lesson 3, align Lesson 1 and 2 translations --- .../translations/README.it.md | 42 +-- .../02-first-ai-app/translations/README.it.md | 74 ++-- .../translations/README.it.md | 331 ++++++++++++++++++ 3 files changed, 389 insertions(+), 58 deletions(-) create mode 100644 lessons/03-prompt-engineering/translations/README.it.md diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index c80b9d53..4801c2a8 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -118,7 +118,7 @@ Un anziano signore vestito con una toga ti saluta con la mano dai gradini del gr **Tu:** «Sono un inventore. Costruisco automi. Vediamo cosa posso fare.» -### Lo "Scarabeo del tempo" +### Lo "Scarabeo del Tempo" Ti viene in mente un pensiero. «Il dispositivo può capirmi se gli parlo?» @@ -132,11 +132,11 @@ Ti viene in mente un pensiero. «Il dispositivo può capirmi se gli parlo?» **Tu:** «Hai un nome?» -**Dispositivo:** «Sono lo Scarabeo del tempo. Il mio creatore mi chiama George, dice che è un bel nome per uno scarabeo.» +**Dispositivo:** «Sono lo Scarabeo del Tempo. Il mio creatore mi chiama George, dice che è un bel nome per uno scarabeo.» **Tu:** «Hai ragione: George è proprio un bel nome, infatti è stato il nome di mio padre.» -![Scarabeo del tempo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) +![Scarabeo del Tempo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/01-intro-to-genai/assets/time-beetle.png) _Dispositivo temporale, “George” lo scarabeo metallico_ @@ -159,7 +159,7 @@ Se vuoi interagire con Dinocrate, esegui la app [Personaggi](/app/README.md). **Passaggi**: -1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). 2. Passa a _/app_ nella root del repo. 3. Individua la console ed esegui `npm install` seguito da `npm start`. 4. Una volta comparso, seleziona il pulsante "Open in Browser". @@ -212,7 +212,7 @@ app.post('/send', async (req, res) => { }); ``` -Ecco una sintesi passo-passo di ciò che fa la funzione: +Ecco una sintesi passo dopo passo di ciò che fa la funzione: 1. **Estrae il messaggio dalla richiesta**: La funzione estrae il messaggio dal corpo della richiesta (req.body). 2. **Crea un array di prompt**: Costruisce una serie di messaggi, tra cui un messaggio di sistema e il messaggio di prompt dell'utente. @@ -226,13 +226,13 @@ Ecco una sintesi passo-passo di ciò che fa la funzione: ### Cosa può fare l'IA generativa per me e per le mie app? > [!NOTE] -> Probabilmente avrai già capito che lo Scarabeo del tempo funziona come un assistente AI con cui puoi interagire utilizzando il linguaggio naturale, scritto o parlato. +> Probabilmente avrai già capito che lo Scarabeo del Tempo funziona come un assistente AI con cui puoi interagire utilizzando il linguaggio naturale, scritto o parlato. Man mano che la tua avventura ad Alessandria prende forma, inizi a intravedere le possibilità offerte dalla combinazione di creatività, ingegnosità e strumenti all'avanguardia per risolvere le sfide e trasformare il mondo che ti circonda. **Tu:** «Dimmi di più sui fari», dici al tuo dispositivo. -**Scarabeo del tempo:** «Un faro è una torre dotata di una luce intensa nella parte superiore, situata vicino alla costa per guidare le navi in mare. La luce funge da ausilio alla navigazione, aiutando i marinai a evitare scogli e reef pericolosi e a raggiungere il porto in sicurezza.» +**Scarabeo del Tempo:** «Un faro è una torre dotata di una luce intensa nella parte superiore, situata vicino alla costa per guidare le navi in mare. La luce funge da ausilio alla navigazione, aiutando i marinai a evitare scogli e reef pericolosi e a raggiungere il porto in sicurezza.» Dinocrate ascolta di nascosto la vostra conversazione e aggiunge: @@ -242,7 +242,7 @@ Dinocrate ascolta di nascosto la vostra conversazione e aggiunge: **Tu:** «I fari sembrano sicuramente un argomento interessante, ma cos'altro può fare l'IA generativa per me e le mie app?» -**Scarabeo del tempo:** «Nel XXI secolo, l'IA generativa ha rivoluzionato molti settori, dall'assistenza sanitaria alla finanza, all'intrattenimento. Ecco alcuni esempi. +**Scarabeo del Tempo:** «Nel XXI secolo, l'IA generativa ha rivoluzionato molti settori, dall'assistenza sanitaria alla finanza, all'intrattenimento. Ecco alcuni esempi. - **Chatbot**: un chatbot in grado di generare risposte simili a quelle umane alle domande degli utenti. Anziché una pagina statica di FAQ, gli utenti possono interagire con un chatbot che fornisce risposte dinamiche. Ciò rende l'esperienza utente più coinvolgente e meno frustrante. @@ -264,7 +264,7 @@ Ecco un esempio di "applicazione chatbot" in azione: ### IA generativa ed ecosistema JavaScript -**Scarabeo del tempo:** «Un modo molto diffuso per sviluppare app nel XXI secolo è l'uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema che comprende il linguaggio stesso, librerie e framework, supporto della comunità, IDE e strumenti. Nell'ecosistema di un linguaggio di programmazione, solitamente si parla dei seguenti elementi.» +**Scarabeo del Tempo:** «Un modo molto diffuso per sviluppare app nel XXI secolo è l'uso di JavaScript. Ogni linguaggio di programmazione è circondato da un ecosistema che comprende il linguaggio stesso, librerie e framework, supporto della comunità, IDE e strumenti. Nell'ecosistema di un linguaggio di programmazione, solitamente si parla dei seguenti elementi.» | Elemento | Descrizione | |---|---| @@ -274,17 +274,17 @@ Ecco un esempio di "applicazione chatbot" in azione: **Tu:** «Interessante, credo di aver sentito parlare di programmazione. Non sono stati Ada Lovelace e Charles Babbage a sperimentarla?» -**Scarabeo del tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l'inventore del motore differenziale, un computer inventore. Sono stati pionieri nel campo dell'informatica, gettando le basi per l'era digitale.» +**Scarabeo del Tempo:** «Sì, Ada Lovelace è stata la prima programmatrice di computer e Charles Babbage è stato l'inventore del motore differenziale, un computer inventore. Sono stati pionieri nel campo dell'informatica, gettando le basi per l'era digitale.» **Tu:** «Erano? Cosa intendi con “erano”? Ho appena ricevuto una lettera da Charles Babbage.» -**Scarabeo del tempo:** «Diciamo solo che ti trovi in una posizione privilegiata che ti permette di interagire con personaggi storici in un modo che pochi altri possono permettersi.» +**Scarabeo del Tempo:** «Diciamo solo che ti trovi in una posizione privilegiata che ti permette di interagire con personaggi storici in un modo che pochi altri possono permettersi.» ### Ecosistema JavaScript **Tu:** «Quindi, hai parlato di ecosistemi, sto solo prendendo appunti, ma che mi dici di JavaScript e in che modo è diverso dagli altri ecosistemi?» -**Scarabeo del tempo:** «JavaScript è uno dei linguaggi di programmazione più popolari al mondo nel XXI secolo. Ecco alcuni motivi della sua popolarità.» +**Scarabeo del Tempo:** «JavaScript è uno dei linguaggi di programmazione più popolari al mondo nel XXI secolo. Ecco alcuni motivi della sua popolarità.» | Motivo | Descrizione | |-|-| @@ -296,13 +296,13 @@ Ecco un esempio di "applicazione chatbot" in azione: **Tu:** «Sono un sacco di motivi, sembra che dovrei puntare su JavaScript per i miei progetti futuri.» -**Scarabeo del tempo:** «Infatti, JavaScript è un linguaggio versatile, anche Python è un linguaggio popolare per lo sviluppo dell'IA.» +**Scarabeo del Tempo:** «Infatti, JavaScript è un linguaggio versatile, anche Python è un linguaggio popolare per lo sviluppo dell'IA.» **Tu:** «Python? Cosa c'entrano i serpenti con la programmazione?» -**Scarabeo del tempo:** «Lasciamo questo argomento per un'altra volta, va bene?» +**Scarabeo del Tempo:** «Lasciamo questo argomento per un'altra volta, va bene?» -**Scarabeo del tempo:** «Ho spiegato sopra perché JavaScript e il suo ecosistema sono generalmente adatti, ma perché lo sono in modo specifico per l'IA generativa? La risposta è che si tratta di un linguaggio supportato da molti fornitori di servizi cloud e framework e strumenti di IA. Si ritiene inoltre che, sebbene Python possa essere la prima scelta per gli scenari di IA, molti sviluppatori stanno utilizzando JavaScript e Typescript.» +**Scarabeo del Tempo:** «Ho spiegato sopra perché JavaScript e il suo ecosistema sono generalmente adatti, ma perché lo sono in modo specifico per l'IA generativa? La risposta è che si tratta di un linguaggio supportato da molti fornitori di servizi cloud e framework e strumenti di IA. Si ritiene inoltre che, sebbene Python possa essere la prima scelta per gli scenari di IA, molti sviluppatori stanno utilizzando JavaScript e Typescript.» > **Lo sapevi?** > Il [62,5% degli sviluppatori dichiara di utilizzare JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) e molti preferiscono [TypeScript](https://www.typescriptlang.org) per i nuovi progetti. @@ -311,24 +311,24 @@ Ecco un esempio di "applicazione chatbot" in azione: Per utilizzare un Large Language Model (LLM) per aiutare Dinocrates con il faro di cui abbiamo parlato in precedenza nella nostra storia, useremo qualcosa chiamato prompt, ovvero una frase che descrive ciò che si desidera. È possibile specificare sia le informazioni necessarie sia il modo in cui si desidera che vengano presentate. -**Scarabeo del tempo:** «Cominciamo, utilizziamo un LLM per ricercare come costruire un faro per aiutare Dinocrate.» +**Scarabeo del Tempo:** «Cominciamo, utilizziamo un LLM per ricercare come costruire un faro per aiutare Dinocrate.» -**Scarabeo del tempo:**: «Dovrai fornire al LLM (cioè “me”) il contesto su come costruire, con quali strumenti e risorse dovrebbero essere disponibili ai tempi di Alessandria.» +**Scarabeo del Tempo:**: «Dovrai fornire al LLM (cioè “me”) il contesto su come costruire, con quali strumenti e risorse dovrebbero essere disponibili ai tempi di Alessandria.» **Tu:** «Ok, dimmi qualcosa di più sugli LLM.» -**Scarabeo del tempo:** «Gli LLM sono un tipo di modello di IA in grado di generare testi simili a quelli umani sulla base di un determinato prompt. Sono addestrati su enormi quantità di dati e possono generare testi coerenti, creativi e contestualmente pertinenti.» +**Scarabeo del Tempo:** «Gli LLM sono un tipo di modello di IA in grado di generare testi simili a quelli umani sulla base di un determinato prompt. Sono addestrati su enormi quantità di dati e possono generare testi coerenti, creativi e contestualmente pertinenti.» -**Scarabeo del tempo:** «Probabilmente vorrai farmi una domanda più precisa, così potrò darti una risposta più accurata, riguardo a, come dire… *coff* *coff* i fari, Alessandria, 300 a.C., Dinocrate, il Faro di Alessandria, ecc.» +**Scarabeo del Tempo:** «Probabilmente vorrai farmi una domanda più precisa, così potrò darti una risposta più accurata, riguardo a, come dire… *coff* *coff* i fari, Alessandria, 300 a.C., Dinocrate, il Faro di Alessandria, ecc.» **Tu:** «Capito, aggiungo più contesto al prompt e poi ti chiedo.» -**Scarabeo del tempo:** «Sì, sto aspettando…» +**Scarabeo del Tempo:** «Sì, sto aspettando…» Visita [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/) o un altro strumento di chatbot online per generare un piano per la costruzione del Faro di Alessandria. > [!TIP] -> Prova a chiedere all'LLM di generare un piano che includa istruzioni passo-passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per ottenere assistenza. +> Prova a chiedere all'LLM di generare un piano che includa istruzioni passo dopo passo per la costruzione del faro. Hai bisogno di aiuto? Consulta la soluzione per ottenere assistenza. ## Soluzione diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index 4dc688f5..990d275b 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -23,7 +23,7 @@ _Questo video offre un'introduzione ai modelli di IA denominati "Large Language ## Storia: "Immaginati su una barca su un fiume" > [!NOTE] -> _La nostra storia finora: sei un inventore, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del tempo._ +> _La nostra storia finora: sei un inventore, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del Tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del Tempo._ > > Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. @@ -32,7 +32,7 @@ _Questo video offre un'introduzione ai modelli di IA denominati "Large Language Insieme a Dinocrate hai dato gli ultimi ritocchi al Faro di Alessandria. L'imponente struttura risplende alla luce del sole e la sua pietra levigata riflette il Mar Mediterraneo. -Guardi lo Scarabeo del tempo che hai in mano, la sua superficie metallica fredda contro il palmo. Stringendo il pugno, sussurri: «Portami a casa». Lo scarabeo inizia a brillare, emettendo una luce morbida e calda e il mondo intorno a te si dissolve in un turbine di colori. +Guardi lo Scarabeo del Tempo che hai in mano, la sua superficie metallica fredda contro il palmo. Stringendo il pugno, sussurri: «Portami a casa». Lo scarabeo inizia a brillare, emettendo una luce morbida e calda e il mondo intorno a te si dissolve in un turbine di colori. ### Una nuova avventura @@ -54,17 +54,17 @@ Mentre cammini, noti un uomo con una lunga barba e un cappello che fruga in una **Tu:** «Mi scusi, signore, dove mi trovo?» Ti guarda, la confusione è evidente nei suoi occhi. Rendendoti conto che stavi parlando in inglese, usi rapidamente il dispositivo che hai in mano e gli chiedi di tradurre. -**Scarabeo del tempo:** «Certo, lo tradurrò nell'italiano del XV secolo. "Dove sono?"» +**Scarabeo del Tempo:** «Certo, lo tradurrò nell'italiano del XV secolo. "Dove sono?"» **Anziano:** L'anziano risponde: «Siete a Firenze, signore. E chi siete voi?» -**Scarabeo del tempo:** Lo Scarabeo del tempo traduce: «Ha detto che ti trovi a Firenze e chiede chi sei.» +**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce: «Ha detto che ti trovi a Firenze e chiede chi sei.» **Tu:** «Digli che sono un inventore e che sto cercando un posto di lavoro.» **Anziano:** «Un artigiano, eh? Avete mai sentito parlare di Leonardo da Vinci?» -**Scarabeo del tempo:** Lo Scarabeo del tempo traduce: «Chiede se hai mai sentito parlare di Leonardo da Vinci.» +**Scarabeo del Tempo:** Lo Scarabeo del Tempo traduce: «Chiede se hai mai sentito parlare di Leonardo da Vinci.» **Tu:** «Certo», rispondi. «Digli che ne ho sentito parlare e che mi piacerebbe conoscerlo.» @@ -72,13 +72,13 @@ Mentre cammini, noti un uomo con una lunga barba e un cappello che fruga in una **Tu:** Chiedi: «Che cosa ha detto?» -**Scarabeo del tempo:** Lo Scarabeo del tempo risponde: «Ha detto che ti porterà da Leonardo.» +**Scarabeo del Tempo:** Lo Scarabeo del Tempo risponde: «Ha detto che ti porterà da Leonardo.» ### In officina ![Officina di Leonardo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-workshop.png) -Chiedi allo Scarabeo del tempo di informarsi su dove si trovi Leonardo. +Chiedi allo Scarabeo del Tempo di informarsi su dove si trovi Leonardo. **Tu:** «Dove è Leonardo?» @@ -90,13 +90,13 @@ Provi un brivido di riconoscimento. **Leonardo:** Gli occhi di Leonardo brillano di curiosità. «Interessante, cosa vi porta qui?» -Lo Scarabeo del tempo traduce. +Lo Scarabeo del Tempo traduce. -**Scarabeo del tempo:** «Chiede che cosa ti porti qui.» +**Scarabeo del Tempo:** «Chiede che cosa ti porti qui.» **Tu:** «Beh, stavo lavorando a un progetto e sono finito qui.» -Gli mostri lo Scarabeo del tempo e i suoi occhi si illuminano di fascino. Lo esamina attentamente, mentre gli spieghi come funziona e come sei finito a Firenze. +Gli mostri lo Scarabeo del Tempo e i suoi occhi si illuminano di fascino. Lo esamina attentamente, mentre gli spieghi come funziona e come sei finito a Firenze. Leonardo ti guarda con entusiasmo. @@ -121,17 +121,17 @@ Se vuoi interagire con Leonardo, esegui la app [Personaggi](/app/README.md). > Questo è interamente frutto di fantasia: le risposte sono generate dall'intelligenza artificiale. > [Dichiarazione di responsabilità sull'IA](../../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) +![Leonardo che parla](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/leonardo-talk.jpeg) **Passaggi**: -1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript) +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). 2. Passa a _/app_ nella root del repo. 3. Individua la console ed esegui `npm install` seguito da `npm start`. 4. Una volta comparso, seleziona il pulsante "Open in Browser". 5. Chatta con Leonardo. -For a more detailed explanation of the app, see [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). > [!NOTE] > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. @@ -140,9 +140,9 @@ For a more detailed explanation of the app, see [Detailed app explanation](/less Prima di poter aiutare Leonardo nel suo progetto, dovresti innanzitutto pensare agli "strumenti del mestiere" essenziali necessari per iniziare ad aiutarlo in modo efficace. -**Tu:** «Scarabeo del tempo, di che cosa ho bisogno per iniziare questo progetto? Suggeriscimi gli strumenti e le librerie di cui ho bisogno che possono aiutarmi a creare un'app di IA che tu possa eseguire.» +**Tu:** «Scarabeo del Tempo, di che cosa ho bisogno per iniziare questo progetto? Suggeriscimi gli strumenti e le librerie di cui ho bisogno che possono aiutarmi a creare un'app di IA che tu possa eseguire.» -**Scarabeo del tempo:** «Sono compatibile con la maggior parte delle macchine in funzione nel 21° secolo; consulta l'elenco seguente per un set di strumenti e librerie essenziali.» +**Scarabeo del Tempo:** «Sono compatibile con la maggior parte delle macchine in funzione nel 21° secolo; consulta l'elenco seguente per un set di strumenti e librerie essenziali.» - **Editor di testo**, per esempio Visual Studio Code. - **Terminale**, per eseguire i comandi. @@ -150,7 +150,7 @@ Prima di poter aiutare Leonardo nel suo progetto, dovresti innanzitutto pensare - **Node.js**. Devi anche installare Node.js e npm, strumenti che ti aiutano a eseguire codice JavaScript sul tuo computer. - **Chiave API**. Avrai bisogno di una chiave API per accedere al modello di IA generativa. Puoi ottenerla dal fornitore del modello, ad esempio OpenAI o Azure OpenAI. -**Tu:** «Grazie, Scarabeo del tempo, Immagino che andrai a prenderli in qualche modo da quel web di cui hai parlato?» +**Tu:** «Grazie, Scarabeo del Tempo, Immagino che andrai a prenderli in qualche modo da quel web di cui hai parlato?» **Time Beetle:** «Sì, li ho già presi» dice e proietta una tastiera e uno schermo sul muro di fronte a te. @@ -158,7 +158,7 @@ Prima di poter aiutare Leonardo nel suo progetto, dovresti innanzitutto pensare **Tu:** «Dimmi di più sulla scrittura vera e propria della app: come posso iniziare?» -**Scarabeo del tempo:** «Certo! Per scrivere un'app, nella sua forma più semplice, si tratta di inviare una richiesta a un'API e visualizzarne la risposta. Analizziamolo nel dettaglio.» +**Scarabeo del Tempo:** «Certo! Per scrivere un'app, nella sua forma più semplice, si tratta di inviare una richiesta a un'API e visualizzarne la risposta. Analizziamolo nel dettaglio.» - **Input**: In un'app di generazione di testo di base, l'input si riferisce al testo iniziale da cui si desidera espandere o sviluppare la app. Questo input può essere fornito dall'utente durante l'esecuzione o preimpostato (hardcoded) all'interno dell'app stessa. Per ora, inizieremo utilizzando il testo hardcoded come input. - **Richiesta API**: È necessario inviare una richiesta all'API del modello di IA generativa con il testo di input. Questa operazione viene eseguita utilizzando la funzione fetch in JavaScript (Node.js). In questa richiesta dovrebbe essere inclusa anche la chiave API. Per motivi di sicurezza, si consiglia di non inserire la chiave API hardcoded nell'app, ma di utilizzare variabili di ambiente. Inoltre, se si utilizza un provider come Azure, si consiglia di valutare l'identità gestita, poiché è considerata un modo più sicuro per accedere alle risorse. Con l'identità gestita è possibile assegnare autorizzazioni più granulari alla propria app. Il vantaggio principale è che il provider cloud si occupa dell'autenticazione per conto dell'utente. @@ -166,11 +166,11 @@ Prima di poter aiutare Leonardo nel suo progetto, dovresti innanzitutto pensare **Tu:** «Sembra abbastanza semplice, puoi illustrarmi uno scenario che avrebbe senso data la situazione in cui ci troviamo?» -**Scarabeo del tempo:** «Certo, vediamo come possiamo creare una semplice app che generi testo in italiano partendo da un input in inglese.» +**Scarabeo del Tempo:** «Certo, vediamo come possiamo creare una semplice app che generi testo in italiano partendo da un input in inglese.» ## La tua prima app: insegnami l'italiano -**Scarabeo del tempo:** «I modelli di IA generativa possono essere utilizzati per molti scopi, ad esempio per la traduzione. Infatti, accettano input in una lingua e possono generare testo in un'altra. Iniziamo con una semplice app che accetta input in inglese e genera testo in italiano.» +**Scarabeo del Tempo:** «I modelli di IA generativa possono essere utilizzati per molti scopi, ad esempio per la traduzione. Infatti, accettano input in una lingua e possono generare testo in un'altra. Iniziamo con una semplice app che accetta input in inglese e genera testo in italiano.» ```javascript @@ -223,21 +223,21 @@ console.log(completion.choices[0]?.message?.content); **Tu:** «Penso di aver capito. Quindi se io cambio il valore della variabile `question` con qualcos'altro, la app genererà una diversa traduzione in italiano?» -**Scarabeo del tempo:** «Esatto, puoi modificare il testo di input come preferisci. Nota anche come i modelli GitHub vengano utilizzati come URL di base per l'API, insieme a un token GitHub come chiave API.» +**Scarabeo del Tempo:** «Esatto, puoi modificare il testo di input come preferisci. Nota anche come i modelli GitHub vengano utilizzati come URL di base per l'API, insieme a un token GitHub come chiave API.» **Tu:** «Perché è importante?» -**Scarabeo del tempo:** «È importante utilizzare un URL di base e una chiave API specifici per il modello che si sta utilizzando. GitHub Models è una piattaforma che ospita una varietà di modelli, tutti con funzionalità e caratteristiche diverse, ed è gratuita.» +**Scarabeo del Tempo:** «È importante utilizzare un URL di base e una chiave API specifici per il modello che si sta utilizzando. GitHub Models è una piattaforma che ospita una varietà di modelli, tutti con funzionalità e caratteristiche diverse, ed è gratuita.» **Tu:** «Oh cielo, comunque non so chi pagare e dubito che accettino la mia valuta qui. :)» ## App di chat -**Scarabeo del tempo:** «I modelli di IA generativa possono essere utilizzati anche per generare testo basato su una conversazione. È possibile simulare una conversazione con l'intelligenza artificiale fornendo un elenco di messaggi come contesto, come se la conversazione fosse già avvenuta.» +**Scarabeo del Tempo:** «I modelli di IA generativa possono essere utilizzati anche per generare testo basato su una conversazione. È possibile simulare una conversazione con l'intelligenza artificiale fornendo un elenco di messaggi come contesto, come se la conversazione fosse già avvenuta.» **You:** «Sembra interessante, ma perché è utile?» -**Scarabeo del tempo:** «È utile perché permette alla IA di fornire una risposta migliore basata su più contesto, anziché un singolo prompt. Per illustrare questo concetto, prendiamo in esame la conversazione qui sotto:» +**Scarabeo del Tempo:** «È utile perché permette alla IA di fornire una risposta migliore basata su più contesto, anziché un singolo prompt. Per illustrare questo concetto, prendiamo in esame la conversazione qui sotto:» ```text @@ -259,7 +259,7 @@ AI: Rome is known for its ancient ruins, art, and vibrant culture. You can visit ``` -**Scarabeo del tempo:** «Immagina se una frase come "Tell me more about this" fosse decontestualizzata: l'IA non saprebbe a cosa si riferisce "this". È qui che il contesto è importante e questo contesto è qualcosa che possiamo fornire al modello di IA tramite il prompt.» +**Scarabeo del Tempo:** «Immagina se una frase come "Tell me more about this" fosse decontestualizzata: l'IA non saprebbe a cosa si riferisce "this". È qui che il contesto è importante e questo contesto è qualcosa che possiamo fornire al modello di IA tramite il prompt.» **Tu:** «Credo di aver capito, come faccio a costruire una conversazione con l'intelligenza artificiale usando questo linguaggio JavaScript di cui parli?» @@ -318,17 +318,17 @@ Ora l'IA fornirà un elenco di messaggi di chat come contesto e genererà una ri **Tu:** «Ok, quindi se ho capito bene la conversazione, l'IA avrà ora il seguente contesto: _I'm going to Rome next month_, quindi in base a questo dovrebbe filtrare le informazioni irrilevanti e fornire una risposta più pertinente?» -**Scarabeo del tempo:** «Esatto, l'IA utilizzerà il contesto per generare una risposta più pertinente alla conversazione.» +**Scarabeo del Tempo:** «Esatto, l'IA utilizzerà il contesto per generare una risposta più pertinente alla conversazione.» ## Migliorare la conversazione in chat con un messaggio di sistema **Tu:** «Capisco, ma c'è un modo per migliorare ulteriormente la situazione?» -**Scarabeo del tempo:** «Sì, puoi aggiungere un messaggio di sistema alla conversazione. Un messaggio di sistema crea una "personalità" per l'IA e può essere utilizzato per fornire ulteriore contesto.» +**Scarabeo del Tempo:** «Sì, puoi aggiungere un messaggio di sistema alla conversazione. Un messaggio di sistema crea una "personalità" per l'IA e può essere utilizzato per fornire ulteriore contesto.» **Tu:** «Ok, quindi nel contesto della conversazione che abbiamo avuto, come apparirebbe un messaggio di sistema?» -**Scarabeo del tempo:** «Un messaggio di sistema per questa conversazione potrebbe essere qualcosa del tipo _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ Questo messaggio stabilisce il tono della conversazione e aiuta l'IA a comprendere il suo ruolo nell'interazione.» +**Scarabeo del Tempo:** «Un messaggio di sistema per questa conversazione potrebbe essere qualcosa del tipo _"I'm an AI travel assistant, here to help you plan your trip to Italy."_ Questo messaggio stabilisce il tono della conversazione e aiuta l'IA a comprendere il suo ruolo nell'interazione.» Per creare un messaggio di questo tipo, assicurati che abbia il tipo "developer" in questo modo: @@ -344,17 +344,17 @@ const message = { **Tu:** «Ok, perfetto, mi assicurerò di includere un messaggio di sistema nelle mie conversazioni in chat. Per curiosità, come si presenta un messaggio di sistema per te?» -**Scarabeo del tempo:** «Un messaggio di sistema per me potrebbe essere qualcosa del tipo _"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."»_ +**Scarabeo del Tempo:** «Un messaggio di sistema per me potrebbe essere qualcosa del tipo _"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."»_ ### Creazione di risposte diverse con l'impostazione della temperatura **Tu:** «C'è qualcos'altro che dovrei sapere sulle conversazioni in chat?» -**Scarabeo del tempo:** «Sì, puoi regolare la "temperatura" delle risposte dell'IA. La temperatura è una variabile con un valore normalmente impostato tra 0 e 1 che determina il livello di creatività delle risposte dell'IA. Una temperatura pari a 0 si tradurrà in risposte più prevedibili, mentre una temperatura pari a 1 si tradurrà in risposte più creative e varie. Puoi regolare la temperatura in base al contesto della conversazione e al tipo di risposte che desideri dall'IA. Nota: è possibile impostare un valore superiore a 1, ma ciò comporta una maggiore casualità e una minore coerenza nelle risposte.» +**Scarabeo del Tempo:** «Sì, puoi regolare la "temperatura" delle risposte dell'IA. La temperatura è una variabile con un valore normalmente impostato tra 0 e 1 che determina il livello di creatività delle risposte dell'IA. Una temperatura pari a 0 si tradurrà in risposte più prevedibili, mentre una temperatura pari a 1 si tradurrà in risposte più creative e varie. Puoi regolare la temperatura in base al contesto della conversazione e al tipo di risposte che desideri dall'IA. Nota: è possibile impostare un valore superiore a 1, ma ciò comporta una maggiore casualità e una minore coerenza nelle risposte.» **Tu:** «Quindi se imposto la temperatura a 0, l'IA fornirà risposte più prevedibili, mentre se la imposto a 1, l'IA fornirà risposte più creative? Che temperatura hai tu?» -**Scarabeo del tempo:** «Ho una temperatura di 0,7 e sì, hai ragione, l'IA fornirà risposte più creative con una temperatura più alta. Vediamo come puoi impostare la temperatura nella tua app:» +**Scarabeo del Tempo:** «Ho una temperatura di 0,7 e sì, hai ragione, l'IA fornirà risposte più creative con una temperatura più alta. Vediamo come puoi impostare la temperatura nella tua app:» ```javascript @@ -383,9 +383,9 @@ Come puoi vedere, puoi regolare la temperatura in base al contesto della convers **Tu:** «C'è dell'altro, giusto?» -**Scarabeo del tempo:** «Sì, un altro concetto importante nei modelli di intelligenza artificiale generativa è la finestra di contesto. La finestra di contesto è il numero di messaggi precedenti che l'intelligenza artificiale utilizza per generare una risposta. Una finestra di contesto più ampia consente all'intelligenza artificiale di considerare più contesto e generare risposte più coerenti.» +**Scarabeo del Tempo:** «Sì, un altro concetto importante nei modelli di intelligenza artificiale generativa è la finestra di contesto. La finestra di contesto è il numero di messaggi precedenti che l'intelligenza artificiale utilizza per generare una risposta. Una finestra di contesto più ampia consente all'intelligenza artificiale di considerare più contesto e generare risposte più coerenti.» -**Scarabeo del tempo:** «Modelli diversi hanno limiti diversi per i token in uscita. Prendiamo come esempio il modello `gpt-4o-2024-08-06`, che ha le seguenti specifiche.» +**Scarabeo del Tempo:** «Modelli diversi hanno limiti diversi per i token in uscita. Prendiamo come esempio il modello `gpt-4o-2024-08-06`, che ha le seguenti specifiche.» - Numero massimo di token in uscita: circa 16k. - Dimensione massima della finestra di contesto: 128k. @@ -394,7 +394,7 @@ Come puoi vedere, puoi regolare la temperatura in base al contesto della convers **Tu:** «Capito: finestra di contesto, token… quanto costa un token?» -**Scarabeo del tempo:** «Un token è una parola o una parte di parola e varia leggermente a seconda della lingua. Esiste uno strumento di misurazione consigliato da OpenAI, chiamato [tokenizer](https://platform.openai.com/tokenizer). Proviamo a scrivere una frase e vediamo quanti token contiene.» +**Scarabeo del Tempo:** «Un token è una parola o una parte di parola e varia leggermente a seconda della lingua. Esiste uno strumento di misurazione consigliato da OpenAI, chiamato [tokenizer](https://platform.openai.com/tokenizer). Proviamo a scrivere una frase e vediamo quanti token contiene.» ```text I want you to generate recipes for me. @@ -440,17 +440,17 @@ Leonardo chiede improvvisamente di poter esaminare più da vicino lo Scarabeo de **Leonardo:** «Ho bisogno di un assistente che mi aiuti con i calcoli e la progettazione della vite aerea. Puoi costruirmi un assistente che possa farlo?» -**Tu:** «Certo, posso costruirtelo. Scarabeo del tempo, possiamo aiutarlo, vero?» +**Tu:** «Certo, posso costruirtelo. Scarabeo del Tempo, possiamo aiutarlo, vero?» -**Scarabeo del tempo:** «Sì, nessun problema, anzi, la vite aerea è una delle invenzioni più affascinanti e visionarie di Leonardo. Progettata alla fine degli anni '80 del Quattrocento…» +**Scarabeo del Tempo:** «Sì, nessun problema, anzi, la vite aerea è una delle invenzioni più affascinanti e visionarie di Leonardo. Progettata alla fine degli anni '80 del Quattrocento…» **Tu:** «Tutto ciò di cui avevo bisogno era un sì, teniamo la lezione per dopo.» -**Scarabeo del tempo:** «Maleducato…» +**Scarabeo del Tempo:** «Maleducato…» **Tu:** «Cosa?» -**Scarabeo del tempo:** «Niente» +**Scarabeo del Tempo:** «Niente» ![Vite aerea, Leonardo da Vinci](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/02-first-ai-app/assets/helicopter.jpg) diff --git a/lessons/03-prompt-engineering/translations/README.it.md b/lessons/03-prompt-engineering/translations/README.it.md new file mode 100644 index 00000000..37f611e0 --- /dev/null +++ b/lessons/03-prompt-engineering/translations/README.it.md @@ -0,0 +1,331 @@ +# Lezione 3: Prompt Engineering + +In questo capitolo imparerai: + +- che cos'è il prompt engineering e come conoscerne le basi può aiutarti a ottenere risultati migliori; +- diverse tecniche di prompt engineering e come forniscono risultati migliori a seconda dello scenario; +- che cosa sono i meta prompt e come aiutano a restringere l'output, ad assicurare che sia accessibile e a fornire una migliore user experience. + +## Configurazione + +Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Guarda un breve video sul prompt engineering](https://img.youtube.com/vi/gQ6TlyxBmWs/0.jpg)](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3) + +_Questo video offre un'introduzione per migliorare le tue capacità di "prompting", insegnandoti come dare all'IA istruzioni più chiare ed effettive per ottenere risultati migliori._ + +*🎥 Clicca sull'immagine qui sopra per guardare un breve video sul engineering* + +💼 Slide: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx) + +## Storia: "Biglietto di viaggio" + +> [!NOTE] +> La nostra storia finora: hai intrapreso un viaggio nel tempo con Leonardo da Vinci, esplorando le meraviglie del Rinascimento. Hai incontrato lo Scarabeo del Tempo, un misterioso dispositivo che ti permette di viaggiare nel tempo e nello spazio. +> +> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. + +> [!NOTE] +> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-sforza) se preferisci passare direttamente al contenuto tecnico. + +**Tu:** «Vediamo se riesco a tornare a casa.» + +Prima che tu riesca a premere il pulsante, le porte dell'officina si spalancano con un fragore assordante. Un uomo, con le spalle larghe e vestito con abiti costosi, è in piedi sulla soglia, agita un pezzo di carta in aria, urlando: + +!["Un arrabbiato Ludovico Sforza irrompe dalla porta](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. Vuole che io finisca un dipinto: 'L'Ultima Cena.'» + +**Tu:** «Non potresti semplicemente dirglielo?» + +**Leonardo:** «Ho provato, ma non è un uomo paziente.» + +Corri dietro a Leonardo, irrompendo dalla porta sul retro in un vicolo buio, dove trovi un cavallo e una carrozza ad aspettarti. + +Leonardo afferra le redini e saltate entrambi sulla carrozza. Con un secco schiocco di frusta, il cavallo parte, galoppando per le strette vie di Firenze. + +**Leonardo:** «Prova a premere quel marchingegno, si stanno avvicinando!» + +**Tu:** «Ok, Scarabeo del Tempo, ascoltami attentamente. Ho bisogno di tornare al presente, a casa, ok?» Improvvisamente, la carrozza urta un dosso e lo Scarabeo del Tempo vola dalle tue manie atterra sul pavimento. Inizia a emettere un segnale acustico e annuncia, con una voce robotica: "Andare a Roma". + +**Tu:** «No, non Roma, casa… casa…» + +Un turbinio di colori avvolge la carrozza, il mondo intorno a te si dissolve in un caleidoscopio di luce. + +## Fuga + +Il turbinio di colori svanisce e ti ritrovi nella carrozza, che ora sfreccia lungo la via Appia a Roma e, con tuo grande stupore, ti ritrovi nel mezzo di una corsa di cavalli. I carri sfrecciano rombando, le ruote sollevano nuvole di polvere. + +![Fuga da Roma](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/escape.png) + +**Tu:** «Leonardo, where are we?» + +**Leonardo:** «Sembra che siamo finiti nel mezzo di una corsa! Dobbiamo andarcene da qui!» + +Ti aggrappi ai lati della carrozza mentre sbanda nel caos. I soldati romani a cavallo si stanno avvicinando, le loro armature scintillano alla luce del sole. + +**Tu**: «Là! Verso il porto!» + +Leonardo guida la carrozza verso l'uscita, le ruote slittano sul selciato. I soldati ti incalzano, le loro grida ti risuonano nelle orecchie. + +**Leonardo:** «Dobbiamo seminarli! Cerca un posto dove nasconderci!» + +Scruti le strette vie con il cuore che batte all'impazzata. + +**Tu:** «Là! Un vicolo cieco!» + +Leonardo svolta nel vicolo, la carrozza sobbalza mentre affronta la curva stretta. Salti fuori dalla carrozza e aiuti Leonardo a trascinare un enorme congegno dal retro. È la sua invenzione: la _vite aerea_. + +**Leonardo:** «Presto, dobbiamo portarlo sul tetto!» + +Entrambi vi sforzate sotto il peso del dispositivo. Il rumore dell'inseguimento dei soldati si fa più forte, i loro passi echeggiano sui muri. Raggiungete il tetto, ansimando e sudando. + +**Leonardo:** «Aiutami a installarlo!» + +Lavorate insieme, muovendo le mani con esperta precisione. Salite entrambi sul dispositivo, con il cuore che batte forte nel petto. + +**Leonardo:** «Tieniti forte!» + +Con un'ultima spinta, la vite aerea inizia a girare. Le pale catturano l'aria e si avverte un'improvvisa spinta. Il terreno si abbassa sotto i piedi mentre il dispositivo decolla, librandosi sopra i tetti di Roma. + +**Tu:** «Ce l'abbiamo fatta, Leonardo! Stiamo volando!» + +**Leonardo:** «Sì, ma dobbiamo trovare un posto sicuro dove atterrare.» + +Ammiri la città, gli antichi edifici si estendono sotto di voi. + +![In volo, guarda la città dall'alto con i piedi penzoloni](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/airborne.png) + +## Interagisci con Sfroza + +Se vuoi interagire con Sfroza, esegui la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo è interamente frutto di fantasia: le risposte sono generate dall'intelligenza artificiale. +> [Dichiarazione di responsabilità sull'IA](../../README.md#responsible-ai-disclaimer) + +![Ludovico Sforza](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/ludovico.png) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante "Open in Browser". +5. Chatta con Sforza. + +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## Che cos'è il prompt engineering? + +**Scarabeo del Tempo:** «Dobbiamo parlare di prompt engineering.» + +**Tu:** «Dobbiamo proprio? Che cos'è?» + +**Scarabeo del Tempo:** «Il prompt engineering, a dispetto del nome, non è qualcosa che riguardi la costruzione di ponti o strade, ma piuttosto riguarda la creazione di "prompt" per ottenere l'output desiderato da un modello di IA generativa.» + +**Tu:** «Ok, ma perché è importante che io lo conosca?» + +**Scarabeo del Tempo:** «Beh, tu vuoi far atterrare la vite aerea, giusto?» + +**Tu:** «Sì, preferibilmente tutta intera. :-)» + +**Scarabeo del Tempo:** «Lo immaginavo, adesso ascoltami! Il prompt engineering consiste nel creare i prompt giusti per ottenere l'output desiderato da un modello linguistico.» + +**Scarabeo del Tempo:** «I Large Language Model hanno quelle che vengono chiamate _proprietà emergenti_, ovvero caratteristiche che non sono programmate esplicitamente nel modello, ma derivano dal modo in cui viene addestrato su grandi quantità di dati testuali. Studiando queste proprietà emergenti, è possibile trarre conclusioni e scoprire modelli che possono aiutare a ottenere risultati migliori dal modello.» + +**Tu:** «Ok, quindi abbiamo scoperto che esistono dei pattern che possono aiutarci a ottenere risultati migliori dal modello. Ma come ci aiuta questo ad atterrare con la vite aerea?» + +**Scarabeo del Tempo:** «Sì, esatto e… wow, non sei mica uno paziente, vero?» + +**Tu:** «Beh, non lo saresti neanche tu se stessi volando sopra un congegno senza chiare istruzioni per l'atterraggio.» + +**Scarabeo del Tempo:** «Sono proprio qui con te, lo sai, ma torniamo al punto.» + +## Come il prompt engineering può aiutare gli sviluppatori di applicazioni + +**Scarabeo del Tempo:** «Come professionista, essere in grado di creare prompt migliori è un'abilità che dovresti voler avere nel tuo bagaglio.» + +Guardandolo dalla prospettiva di uno sviluppatore, puoi usare il prompt engineering per: + +- **Ottenere risultati più accurati** dal tuo modello linguistico e in definitiva migliorare la user experience della tua applicazione. +- **Controllare l'output** del modello per assicurare che sia rilevante e appropriato per i tuoi utenti. Questo è particolarmente importante quando si ha a che fare con argomenti sensibili e anche per proteggere la tua brand reputation. +- **Formattare l'output** in un modo che sia facile da capire e consumare. Approfondiremo questo aspetto nel prossimo capitolo. + +**Scarabeo del Tempo:** «Esploriamo le diverse tecniche e strategie che puoi utilizzare per creare prompt efficaci per il tuo modello linguistico.» + +## Tecniche e strategie di prompt engineering + +**Scarabeo del Tempo:** «Ecco alcune tecniche e strategie che puoi usare per creare prompt efficaci.» + +- **Few-shot prompting**. Questa tecnica consiste nel fornire all'IA alcuni esempi per mostrare il tipo di risposta desiderata. +- **Chain-of-Thought prompting** Questa tecnica consiste nel fornire una sequenza di prompt per insegnare all'IA come risolvere un compito complesso passo dopo passo. +- **Meta-prompt**. Questa tecnica prevede l'aggiunta di dettagli o istruzioni extra per modellare l'output dell'IA in modo più preciso. +- **Maieutic prompting**. Questa tecnica prevede l'uso di domande guida per indirizzare l'IA verso una risposta specifica. + +**Tu:** «Sembra interessante, suppongo che mi darai qualche esempio.» + +**Scarabeo del Tempo:** «Sì, veniamo subito al dunque. Diamo un'occhiata ad alcuni esempi per ciascuna di queste tecniche, così da capire come funzionano nella pratica.» + +### Few-shot prompting: Fornire esempi per guidare l'output dell'IA + +Few-shot prompting forniscono a un modello di intelligenza artificiale alcuni esempi per orientare il suo output. Immagina di essere nella vite aerea e di chiedere informazioni sull'antica Roma. I prompt few-shot potrebbero apparire così. + +> "Tell me about the Roman Colosseum." → "It’s a massive amphitheater." +> +> "What was life like in ancient Rome?" → "It was bustling and tough." + +**Tu:** «Capisco! Questo aiuta l'IA a fare le cose per bene, anche quassù! ;)» + +**Scarabeo del Tempo:** «Esattamente, è un metodo consolidato. Il prossimo!» + +### Chain-of-Thought Prompting: Mostra il ragionamento passo dopo passo + +**Scarabeo del Tempo:** «Questa tecnica guida l'IA mostrandole un ragionamento passo dopo passo per risolvere un problema. Immagina di far atterrare la vite aerea. Potresti spiegarlo così.» + +- Sei a 100 metri di altezza. +- La gravità spinge a 9,8 m/s². +- Formula: altezza = ½ * g * t². +- Soluzione: t ≈ 4,5 secondi per atterare. + +Il tuo prompt diventa: + +> - 100 meters above ground +> - Gravity: 9.8 m/s² +> - How many seconds to land? + +**Risposta: 4,5 secondi** + +**Tu:** «È stato veloce, speriamo che i numeri tornino!» + +**Scarabeo del Tempo:** «Insegna all'IA a ragionare passo dopo passo.» + +**Tu:** «Quindi si tratta di scomporre i problemi per ottenere risposte precise?» + +**Scarabeo del Tempo:** «Sì, perfetto per compiti complessi come un'app di tutoring di matematica!» + +### Maieutic Prompting: Mettere in discussione l'output per verificarne l'accuratezza + +**Scarabeo del Tempo:** «Questa tecnica utilizza domande per verificare l'accuratezza dell'output dell'IA. Si chiede di ogni passaggio per garantire un ragionamento coerente.» + +**Tu:** «Quindi, mettere in discussione tutto quello che dice? Sembra divertente. ;)» + +**Scarabeo del Tempo:** «Mettiamo alla prova l'atterraggio con la nostra vite aerea.» + +- 100 metri di altezza +- Gravità: 9,8 m/s² +- Quanti secondi per atterrare? (Risposta: 4,5s) + +Chiedi: "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. + +**Scarabeo del Tempo:** «Si tratta di verificare le risposte dell'IA con domande di follow-up.» + +**Tu:** «Quindi, non fidarti, ma indaga con delle domande?» + +**Scarabeo del Tempo:** «Esatto! Garantisce un ragionamento solido.» + +## Meta Prompt: Aggiungere istruzioni extra per la precisione + +**Scarabeo del Tempo:** «Il prossimo, meta prompt.» + +**Tu:** «Uhm, un the prima?» + +**Scarabeo del Tempo:** «_Sigh_. Aggiungono indicazioni ai prompt per un output migliore, ideali per le app sensibili e rivolte al cliente.» + +Ecco un esempio: + +> **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. + +Garantisce accuratezza e aderenza ai prodotti Contoso. Senza: + +> **Prompt:** Best sports products for beginners? +> **Response:** Basketballs, soccer balls, tennis rackets, plus footballs—_not all Contoso items_. + +**Tu:** «Pratico! Mantiene le risposte in carreggiata, come le leggi per il mio automa.» + +**Scarabeo del Tempo:** «Lo sapresti, _"Frankenstein"_… ehm, niente!» + +**Tu:** «Cosa?» + +**Scarabeo del Tempo:** «Non importa.» + +> *Frankenstein* di Mary Shelley: 1818, 42 anni prima del tuo viaggio nel tempo. [Leggi tutto](https://it.wikipedia.org/wiki/Mary_Shelley) + +**Tu:** «Quindi, senza meta prompt è il caos?» + +**Scarabeo del Tempo:** «Sì, otterresti risposte estranee al brand.» + +**Tu:** «Capito, la precisione è importante!» + +## Compito - Aiutiamo i nostri eroi a far atterrare la vite aerea + +**Tu:** «Questa è la parte in cui mi mostri come far atterrare la vite aerea, giusto?» + +**Scarabeo del Tempo:** «Sì, cominciamo. La collina si trova a circa 100 metri dalla nostra posizione attuale. Ecco come possiamo impostare il prompt.» + +- Altezza attuale dal suolo: 100 metri +- Avanzamento a: 10 metri al secondo +- Gravità: 9,8 metri al secondo quadrato +- Vento ascendente a: 0,7 metri al secondo + +**Leonardo:** «Il tuo gadget basato sull'IA può aiutarti a calcolare se ce la faremo o se dovremo fare un altro salto temporale?» + +**Scarabeo del Tempo:** «Sì, certo che potrei. Comunque mi chiamo George, lo preferisco a gadget! In realtà, lascerò che siate voi due a capire come impostare il prompt. ☺️» + +Crea una app che chieda: + +- Altezza +- Velocità di avanzamento +- Gravità +- Vento ascendente +- Distanza dalla collina + +Utilizza la tecnica chain-of-thought per arrivare a una risposta. + +Ecco un progetto da cui partire [Progetto iniziale](/app/README.md). + +## Soluzione + +Crea una app in JavaScript che chieda i seguenti input: + +- Altezza attuale dal suolo +- Avanzamento a metri al secondo +- Gravità in metri al secondo quadrato +- Vento ascendente in metri al secondo +- Distanza dalla collina + +Quindi utilizza l'LLM per incorporare questi input e sfruttare la tecnica di suggerimento della chain-of-thought per guidare il modello verso la risposta corretta. + +[Soluzione](/lessons/03-prompt-engineering/solution/solution.md) + +## Verifica delle conoscenze + +**Domanda:** What is prompt engineering? Select all that apply. + +A. Prompt engineering is about building bridges and roads. +B. Prompt engineering is about crafting the right prompts to get the desired output from a language model. +C. Prompt engineering is about training a model to recognize patterns in data. + +[Soluzione del quiz](/lessons/03-prompt-engineering/solution/solution-quiz.md) + +## Risorse per lo studio autonomo + +- [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) From b715610e405c2b2bf36c5cc8de8af51348628bed Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 11 Oct 2025 19:21:21 +0200 Subject: [PATCH 18/22] chore: add complete Italian translation for Lesson 4, align Lesson 1, 2, and 3 translations --- .../translations/README.it.md | 11 +- .../02-first-ai-app/translations/README.it.md | 11 +- .../translations/README.it.md | 27 +- .../translations/README.it.md | 558 ++++++++++++++++++ 4 files changed, 581 insertions(+), 26 deletions(-) create mode 100644 lessons/04-structured-output/translations/README.it.md diff --git a/lessons/01-intro-to-genai/translations/README.it.md b/lessons/01-intro-to-genai/translations/README.it.md index 4801c2a8..bb0e4a75 100644 --- a/lessons/01-intro-to-genai/translations/README.it.md +++ b/lessons/01-intro-to-genai/translations/README.it.md @@ -1,14 +1,13 @@ # Lezione 1: Introduzione all'IA generativa e agli LLM per sviluppatori JavaScript In questo capitolo imparerai a: - -- comprendere le basi dell'IA generativa e dei Large Language Model (LLM); +- comprendere le basi dell’IA generativa e dei Large Language Model (LLM); - identificare le potenziali applicazioni e limitazioni dei Large Language Model (LLM) nello sviluppo JavaScript; -- esplorare come l'IA generativa può migliorare l'esperienza utente nelle applicazioni JavaScript. +- esplorare come l’IA generativa può migliorare l’esperienza utente nelle applicazioni JavaScript. ## Configurazione -Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate @@ -26,13 +25,13 @@ Inoltre, l'IA generativa si è evoluta in capacità multimodali, consentendo di *In poche parole, le interfacce in linguaggio naturale stanno diventando il nuovo standard per molte app e i tuoi utenti si aspettano di poterle usare.* -## Storia: "Un viaggio attraverso il tempo" +## Storia: “Un viaggio nel tempo” > [!NOTE] > Cominciamo con una panoramica della storia, una storia che collega il passato al futuro! Man mano che procederai con questo programma di studi, ti imbarcherai in un'avventura emozionante, viaggiando indietro nel tempo per collaborare con alcune delle menti più brillanti della storia. Insieme affronterete sfide ed esplorerete come l'IA generativa possa rivoluzionare le vostre applicazioni JavaScript. > [!NOTE] -> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci passare direttamente al contenuto tecnico. +> Anche se consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-dinocrate) se preferisci passare direttamente al contenuto tecnico. Il tuo viaggio inizia nella Londra degli anni '60 dell'Ottocento, dove vestirai i panni di un abile inventore. Attraverso una serie di avventure avvincenti, affinerai le tue abilità di intelligenza artificiale e sbloccherai soluzioni che trascendono il tempo. diff --git a/lessons/02-first-ai-app/translations/README.it.md b/lessons/02-first-ai-app/translations/README.it.md index 990d275b..8502e8f6 100644 --- a/lessons/02-first-ai-app/translations/README.it.md +++ b/lessons/02-first-ai-app/translations/README.it.md @@ -1,14 +1,13 @@ # Lezione 2: Scrivere la tua prima app AI In questo capitolo imparerai a: - - configurare il tuo ambiente di sviluppo; -- scrivere un'app di base; +- scrivere un’app di base; - comprendere i prompt di sistema. ## Configurazione -Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate @@ -20,7 +19,7 @@ _Questo video offre un'introduzione ai modelli di IA denominati "Large Language 💼 Slide: [Introduzione ai Large Language Model (LLM)](/videos/slides/01-llms.pptx) -## Storia: "Immaginati su una barca su un fiume" +## Storia: “Immaginati su una barca sul fiume” > [!NOTE] > _La nostra storia finora: sei un inventore, un artigiano della Londra del 1860 che ha viaggiato nel tempo usando un misterioso dispositivo chiamato Scarabeo del Tempo. Hai viaggiato attraverso gli annali della storia, assistendo alla creazione del Faro di Alessandria, una meraviglia dell'ingegneria antica che hai contribuito a creare con un piccolo aiuto da Dinocrate e dallo Scarabeo del Tempo._ @@ -28,7 +27,7 @@ _Questo video offre un'introduzione ai modelli di IA denominati "Large Language > Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. > [!NOTE] -> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci passare direttamente al contenuto tecnico. +> Anche se consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-leonardo) se preferisci passare direttamente al contenuto tecnico. Insieme a Dinocrate hai dato gli ultimi ritocchi al Faro di Alessandria. L'imponente struttura risplende alla luce del sole e la sua pietra levigata riflette il Mar Mediterraneo. @@ -131,7 +130,7 @@ Se vuoi interagire con Leonardo, esegui la app [Personaggi](/app/README.md). 4. Una volta comparso, seleziona il pulsante "Open in Browser". 5. Chatta con Leonardo. -Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). > [!NOTE] > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. diff --git a/lessons/03-prompt-engineering/translations/README.it.md b/lessons/03-prompt-engineering/translations/README.it.md index 37f611e0..f7b18519 100644 --- a/lessons/03-prompt-engineering/translations/README.it.md +++ b/lessons/03-prompt-engineering/translations/README.it.md @@ -1,34 +1,33 @@ -# Lezione 3: Prompt Engineering +# Lezione 3: Prompt engineering In questo capitolo imparerai: - -- che cos'è il prompt engineering e come conoscerne le basi può aiutarti a ottenere risultati migliori; +- che cos’è il prompt engineering e come conoscerne le basi può aiutarti a ottenere risultati migliori; - diverse tecniche di prompt engineering e come forniscono risultati migliori a seconda dello scenario; -- che cosa sono i meta prompt e come aiutano a restringere l'output, ad assicurare che sia accessibile e a fornire una migliore user experience. +- che cosa sono i meta prompt e come aiutano a restringere l’output, ad assicurare che sia accessibile e a fornire una migliore user experience. ## Configurazione -Se non l'hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi farlo: [Configura il tuo ambiente](/docs/setup/README.md). +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). ## Risorse correlate [![Guarda un breve video sul prompt engineering](https://img.youtube.com/vi/gQ6TlyxBmWs/0.jpg)](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3) -_Questo video offre un'introduzione per migliorare le tue capacità di "prompting", insegnandoti come dare all'IA istruzioni più chiare ed effettive per ottenere risultati migliori._ +_Questo video offre un’introduzione per migliorare le tue abilità di “prompting”, insegnandoti come dare all’IA istruzioni più chiare ed effettive per ottenere risultati migliori._ -*🎥 Clicca sull'immagine qui sopra per guardare un breve video sul engineering* +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sul prompt engineering* 💼 Slide: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx) -## Storia: "Biglietto di viaggio" +## Storia: “Biglietto di viaggio” > [!NOTE] > La nostra storia finora: hai intrapreso un viaggio nel tempo con Leonardo da Vinci, esplorando le meraviglie del Rinascimento. Hai incontrato lo Scarabeo del Tempo, un misterioso dispositivo che ti permette di viaggiare nel tempo e nello spazio. > -> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall'inizio e iniziare a usare l'IA generativa. +> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. > [!NOTE] -> Sebbene consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-sforza) se preferisci passare direttamente al contenuto tecnico. +> Anche se consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-sforza) se preferisci passare direttamente al contenuto tecnico. **Tu:** «Vediamo se riesco a tornare a casa.» @@ -107,8 +106,8 @@ Ammiri la città, gli antichi edifici si estendono sotto di voi. Se vuoi interagire con Sfroza, esegui la app [Personaggi](/app/README.md). > [!IMPORTANT] -> Questo è interamente frutto di fantasia: le risposte sono generate dall'intelligenza artificiale. -> [Dichiarazione di responsabilità sull'IA](../../README.md#responsible-ai-disclaimer) +> Questo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../README.md#responsible-ai-disclaimer) ![Ludovico Sforza](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/03-prompt-engineering/assets/ludovico.png) @@ -120,7 +119,7 @@ Se vuoi interagire con Sfroza, esegui la app [Personaggi](/app/README.md). 4. Una volta comparso, seleziona il pulsante "Open in Browser". 5. Chatta con Sforza. -Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates). +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). > [!NOTE] > Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l'[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. @@ -159,7 +158,7 @@ Guardandolo dalla prospettiva di uno sviluppatore, puoi usare il prompt engineer - **Ottenere risultati più accurati** dal tuo modello linguistico e in definitiva migliorare la user experience della tua applicazione. - **Controllare l'output** del modello per assicurare che sia rilevante e appropriato per i tuoi utenti. Questo è particolarmente importante quando si ha a che fare con argomenti sensibili e anche per proteggere la tua brand reputation. -- **Formattare l'output** in un modo che sia facile da capire e consumare. Approfondiremo questo aspetto nel prossimo capitolo. +- **Formattare l'output** in un modo che sia facile da capire e utilizzare. Approfondiremo questo aspetto nel prossimo capitolo. **Scarabeo del Tempo:** «Esploriamo le diverse tecniche e strategie che puoi utilizzare per creare prompt efficaci per il tuo modello linguistico.» diff --git a/lessons/04-structured-output/translations/README.it.md b/lessons/04-structured-output/translations/README.it.md new file mode 100644 index 00000000..4f788623 --- /dev/null +++ b/lessons/04-structured-output/translations/README.it.md @@ -0,0 +1,558 @@ +# Lezione 4: Output strutturato + +In questo capitolo imparerai: +- che cos’è l’_output strutturato_ e come sfruttarlo in modo efficace; +- come estrarre informazioni dai prompt e incorporarle nell’output; +- a generare differenti tipi di formato dell’output, come ad esempio JSON, per un suo facile utilizzo da parte dei servizi. + +## Configurazione + +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +È utile guardare di nuovo il video sul prompt engineering perché getta le basi per ciò che imparerai in questo capitolo. + +[![Guarda un breve video sul prompt engineering](https://img.youtube.com/vi/gQ6TlyxBmWs/0.jpg)](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3) + +_Questo video offre un’introduzione per migliorare le tue abilità di “prompting”, insegnandoti come dare all’IA istruzioni più chiare ed effettive per ottenere risultati migliori._ + +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sul prompt engineering* + +💼 Slide: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx) + +## Storia: “Dalla padella alla brace” + +> [!NOTE] +> La nostra storia finora: tu, un ingegnere meccanico del 1860, hai intrapreso un viaggio nel tempo con Leonardo da Vinci. Sei sfuggito ai soldati romani, o meglio, stai per sfuggirgli, e stai cercando disperatamente un modo per far atterrare la vite aerea in sicurezza. +> +> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. + +> [!NOTE] +> Anche se consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-montezuma) se preferisci passare direttamente al contenuto tecnico. + +Il vento ti sferza mentre tu e Leonardo da Vinci salite sulla sua vite aerea, con la struttura di legno che scricchiola sotto la tensione. + +**Tu:** «Leonardo, dobbiamo trovare una via di uscita!» gridi sopra il fragore del vento. + +**Leonardo:** «Mi fido della mia invenzione, ma abbiamo bisogno di qualcosa in più della fiducia per scappare da questi soldati.» + +**Tu:** «Questa potrebbe essere la nostra unica chance», dici, premendo l’intricato meccanismo dello scarabeo. Una luce intensa vi avvolge entrambi e il mondo intorno a voi cambia e si deforma. + +### L’Impero azteco + +La luce intensa dello Scarabeo del Tempo svanisce e ti ritrovi alla base di un’imponente piramide di pietra. Guardandoti intorno, ti rendi conto di essere atterrato nel cuore dell’Impero azteco. + +La vite aerea poggia goffamente su una grande pietra finemente intagliata, con incisioni che ricordano un calendario. + +![Calendario azteco, Wikipedia](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/aztec.png) + +_Calendario azteco, Wikipedia_ + +Leonardo da Vinci si fa avanti, con gli occhi spalancati per la meraviglia. + +**Leonardo:** «Incredible», mormora, passando le dita sulle incisioni. «Ma spero che questo non abbia alcuna importanza.» + +Prima che tu possa reagire, si avvicina un gruppo di soldati aztechi. + +![Incontro con gli Aztechi](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/meeting.png) + +**Capo Soldato:** «Chi siete e che cosa avete fatto?» chiede in nahuatl. + +Fai un respiro profondo, cercando di calmare i nervi. + +**Tu:** «Siamo viaggiatori provenienti da una terra lontana», inizi, sperando che la tua conoscenza delle lingue antiche ti sia utile. «Questa è una macchina volante, un dono degli dei per aiutarci a raggiungervi.» + +Gli occhi del guerriero si spalancano per la sorpresa, ma lui rimane cauto. + +**Capo Soldato:** «Verrete con noi a incontrare il sovrano Montezuma. Sarà lui a decidere il vostro destino.» + +Una volta raggiunta la cima della piramide, si accede a una grande sala dove Montezuma, il sovrano dell’Impero azteco, siede su un trono ornato di oro e piume. + +**Montezuma:** «Affermate di essere viaggiatori provenienti da una terra lontana», dice Montezuma, con voce calma ma autorevole. «E avete danneggiato il nostro sacro calendario. Come intendete rimediare?» + +## Facciamo un gioco + +**Leonardo:** «Veniamo in pace», dice, con voce ferma. «Cerchiamo conoscenza e comprensione. Permetteteci di dimostrarvi la potenza della nostra macchina e di condividere la nostra conoscenza con voi.» + +**Montezuma:** «Benissimo. Propongo una partita a [Patolli](#patolli). Se vinco al meglio delle tre partite, mi darai il tuo dispositivo e mi spiegherai come funziona. Se vinci, sei libero di andare.» + +![Giocando a Patolli](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/game.png) + +La partita inizia e nella stanza cala il silenzio, a parte il rumore dei fagioli che rotolano e dei pezzi che si muovono sulla scacchiera. + +Montezuma vince la prima partita, con evidente abilità ed esperienza. Leonardo studia attentamente la scacchiera, elaborando mentalmente strategie e probabilità. + +La seconda partita è una lotta serrata, ma Leonardo riesce ad assicurarsi la vittoria, pareggiando il punteggio. + +**Leonardo:** «Un’ultima partita», sussurra, «George (Scarabeo del Tempo), dobbiamo assolutamente vincerla, suggeriscimi le mosse giuste.» + +**Scarabeo del Tempo:** «Molto bene, calcolo… ecco fatto…» + +Con una mossa finale e decisiva, Leonardo vince la partita. La sala esplode in applausi e grida di gioia, gli Aztechi chiaramente impressionati dalla sua abilità e compostezza. Montezuma, sebbene deluso, annuisce in segno di rispetto. + +**Montezuma:** «Hai vinto lealmente», dice Montezuma, con una nota di ammirazione nella voce. «Sei libero di andare e puoi tenere il tuo dispositivo. Ma sappi che sei sempre il benvenuto qui, se desideri tornare.» + +**Scarabeo del Tempo:** «Non dirò niente se non lo fai tu, Leonardo.» 😉 + +### Patolli + +> [!NOTE] +> Il Patolli è uno dei giochi più antichi conosciuti nelle Americhe, praticato già dalle culture mesoamericane precolombiane come gli Aztechi. È un mix di strategia e fortuna. +> +> **Come si gioca a Patolli**: +> - **Tabellone e pedine**: Si gioca su un tabellone a forma di X con un blocco centrale e quattro bracci. I giocatori usano cinque fagioli neri come dadi, contrassegnati su un lato. +> - **Preparazione**: Ogni giocatore sceglie sei segnalini (perline) del proprio colore e li posiziona fuori dal tabellone, più le perline punti per il punteggio. +> - **Svolgimento del gioco**: Tira i fagioli per spostare i segnalini sul tabellone e tornare al punto di partenza. Un tiro di cinque muove di dieci caselle. Atterrare su determinate caselle può far guadagnare turni, perdere punti o catturare segnalini. +> +> **Coinvolgimento Azteco**: Ampiamente praticato da nobili e popolani, era uno dei preferiti alla corte di Montezuma. Oltre al divertimento, prevedeva scommesse ad alto rischio come coperte, pietre preziose o persino la libertà. + +![Tabellone da Patolli](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/patolli.png) + +_Patolli, Wikipedia_ + +## Interagisci con Montezuma + +Se vuoi interagire con Montezuma, esegui la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../README.md#responsible-ai-disclaimer) + +![Montezuma](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/04-structured-output/assets/montezuma.jpeg) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante "Open in Browser". +5. Chatta con Montezuma. + +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l’[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## Output strutturato + +**Scarabeo del Tempo:** «Vuoi sapere come ho sconfitto Montezuma?» + +**Tu:** «Sssh! Non così forte, siamo ancora nell’Impero azteco!» + +**Scarabeo del Tempo:** «Oh giusto, scusa, sì, quindi un output strutturato è così. Mi hai chiesto le mosse giuste e te le ho fornite in modo strutturato.» + +L’output strutturato utilizza formati di dati specifici per organizzare le informazioni in modo chiaro. Formati comuni come JSON, XML e CSV semplificano l’elaborazione e l’utilizzo dei dati da parte dei servizi. + +I modelli di intelligenza artificiale generativa possono generare dati in vari formati. Tuttavia, l’output di testo non strutturato può rendere difficile l’estrazione delle informazioni e la loro trasmissione ad altri servizi. L’output strutturato può essere di aiuto in questo senso. + +**Tu:** «Beh, non sei intelligente?» 😉 + +**Scarabeo del Tempo:** «Faccio del mio meglio.» 😀 + +Un altro vantaggio, anche per i lettori umani, è che i dati strutturati sono più facili da leggere e comprendere quando seguono un formato familiare. + +Esaminiamo alcuni esempi di input e vediamo come richiedere formati di output specifici può aiutare a estrarre informazioni che ne facilitano la comprensione e l’utilizzo. + +**Tu:** «Ok, non è che abbiamo altri programmi, sentiamo.» + +## Modellare l’output + +**Scarabeo del Tempo:** «Cominciamo con un semplice esempio. Immagina di essere Leonardo da Vinci e di cercare idee per invenzioni utilizzando la tecnologia del XV secolo. Vuoi sapere di quali risorse hai bisogno e quanto impegno ci vorrebbe per realizzare ciascuna invenzione. Ecco come puoi richiedere queste informazioni.» + +**Leonardo:** «Oh, mi piace questo gioco, fate tutti finta di essere me!» + +> 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:** «Sì, rubo proprio l’idea del mulino ad acqua, me la immagino già, un mulino in riva al fiume, che macina il grano fino a trasformarlo in farina, è perfetto! Mi piace questo aggeggio. Cos’altro mi viene in mente, piccolo aggeggio? Questo mi renderà meno dipendente da gente come Sforza.» + +**Scarabeo del Tempo:** «Certo, se mai riuscissi a finire un progetto, Leonardo.» 😀 + +**Leonardo:** «Ehi, ci sto lavorando!» + +**Scarabeo del Tempo:** «Vediamo come è possibile istruire il modello affinché presenti l’output in modo più strutturato.» + +### Strutturare i prompt per ottenere risultati migliori + +**Scarabeo del Tempo:** Puoi migliorare il prompt indicando al modello come desideri che sia strutturato l’output. Ad esempio, puoi richiedere un formato di tabella con le colonne di cui hai bisogno. Ecco come puoi modificare il 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:** «Mi piace, mi farà sicuramente risparmiare un sacco di tempo.» + +**Tu:** «Anche a me.» + +### Presentazione di un template di output + +Un altro modo per ottenere un output strutturato è presentare un template di output. Può essere in qualsiasi formato, dalle colonne al JSON, XML, CSV o 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:** «Fantastico, ma chi è Jason?» + +**Scarabeo del Tempo:** «JSON, Leonardo, JSON. È un formato strutturato, facile da utilizzare per servizi o applicazioni.» + +**Leonardo:** «È quello che ho detto, Jason.» + +**Scarabeo del Tempo:** «_Sigh_.» + +Come potete vedere, l’output è strutturato secondo le specifiche del modello di output. Questo lo rende più facile da leggere e comprendere e crea anche un output ripetibile che può essere facilmente utilizzato da altri servizi o applicazioni. + +Naturalmente, un servizio trae vantaggio da un output ancora più strutturato, come JSON, XML o CSV, quindi vediamo come richiederlo. + +### Utilizzo di output strutturati con formati come JSON, XML o CSV + +**Scarabeo del Tempo:** «Finora, hai visto come puoi controllare la struttura dell’output istruendo il modello nel prompt. Hai persino fornito un template di output. Approfondiamo ulteriormente questa idea e vediamo come può essere applicata a formati di output più strutturati come JSON e altri.» + +Modifica il prompt di conseguenza per richiedere l’output 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": "" +> } +> ] + +```text +> 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." + } +] +``` + +**Scarabeo del Tempo:** «Questo tipo di output strutturato può essere inviato a un altro servizio o applicazione in grado di utilizzare dati JSON.» + +## Estrazione dei dati dai prompt + +**Scarabeo del Tempo:** «Immagina di creare un chatbot che aiuti gli utenti a trovare informazioni sui viaggi da prenotare. Vuoi estrarre dettagli chiave dall’input dell’utente per fornire risposte pertinenti. Supponiamo di avere una descrizione come la seguente.» + +> Type where you would like to go, when you want to travel, and your budget. + +Che aspetto ha un prompt che estrae le informazioni? + +> 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 (Scarabeo del Tempo) non smette mai di parlare, vero?» + +**Tu:** «Vediamo se riesco a trovare l’interruttore di spegnimento.» + +**Scarabeo del Tempo:** «Proviamo a fare lo stesso con un prompt simile, variando un po’ l’input dell’utente in modo da essere certi che il modello stia facendo la cosa giusta.» + +> 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" +} +``` + +Ciò che puoi fare come sviluppatore è creare un 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}. +``` + +**Tu:** «Trovato, prendi questo George!» + +**Scarabeo del Tempo:** «_Spegnimento_.» + +**Leonardo:** «Finalmente pace e tranquillità.» + +**Scarabeo del Tempo:** «_Avvio di emergenza_. Dove ero rimasto? Oh sì.» + +**Scarabeo del Tempo:** «Per i chatbot, questa è una funzionalità molto potente in quanto consente di estrarre informazioni dall’input dell’utente. Cosa succede se l’utente chiede informazioni di ogni tipo? Puoi creare un modello in cui descrivere le competenze, le funzionalità del tuo chatbot e i parametri di cui ha bisogno. Ecco come fare.» + +```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} +``` + +Proviamo i seguenti input utente: + +> 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 + } +} +``` + +Questa combinazione che consiste nella presentazione di competenze e parametri ed estrazione di dati dai prompt è anche nota come _chiamata di strumento_ o _chiamata di funzione_. Una risposta come questa dal tuo modello semplifica per te, in quanto sviluppatore, la comprensione delle esigenze dell’utente e il modo in cui richiamare una funzione corrispondente per soddisfare la sua richiesta. + +**Tu:** «Informazioni molto utili, George!» + +## Compito - Ripara la vite aerea + +**Scarabeo del Tempo:** «Ho bisogno della vostra attenzione, abbiamo un problema. La vite aerea ha subito alcuni danni durante la fuga dai soldati romani e lo sbarco nell’Impero azteco. La macchina di Leonardo da Vinci è piuttosto sensibile e richiede un intervento molto specifico per essere riparata. Devi fornire le informazioni necessarie al tuo Scarabeo del Tempo (Assistente AI) per aiutarti a riparare la vite aerea.» + +**Leonardo:** «Quindi sono riuscito a riparare il danno alla vite dell’antenna, ma ora è necessaria una sequenza di avvio: sinistra, sinistra, su, destra.» + +**Tu:** «Sembra abbastanza facile, solo quel testo?» + +**Leonardo:** «Sì, ma è speciale, deve essere specchiato, è così che scrivo tutti i miei testi. E ovviamente uso il cifrario di Cesare con uno shift di 3 perché sono italiano.» 😀 + +**Tu:** «Non potresti semplicemente scriverlo?» + +**Leonardo:** «Potrei, ma sono curioso di vedere se tu e lo Scarabeo del Tempo riuscite a farlo.» + +**Tu:** «Bene.» + +**Istruzioni:** Scrivi un prompt che chieda la sequenza di avvio per la vite aerea; il testo deve essere specchiato e codificato con un cifrario di Cesare con uno shift di 3. Rispondi con il testo codificato. + +Dai un’occhiata alla [app di esempio](/app/README.md) per iniziare a scrivere il codice. Contiene un progetto Node.js con tutte le dipendenze necessarie. + +> NOTA: Se non hai ancora creato un Codespace, fallo ora perché ti servirà per far funzionare la comunicazione AI nell’app di esempio. +> +> Guarda la sezione _Option 1: Creating a **GitHub Codespace**_ del documento [Setup your environment](/docs/setup/README.md). + +## Soluzione + +[Soluzione](/lessons/04-structured-output/solution/solution.md) + +## Sfida + +Adotta l’esempio della prenotazione di un viaggio, fornendo competenze ed estraendo parametri per un dominio a tua scelta. Scrivi un prompt che richiede un input all’utente e poi estrai le informazioni necessarie per soddisfare la richiesta. Rispondi con i dati estratti in formato JSON con le colonne skill, parameters e extracted_data. + +Determina inoltre la competenza in base all’input dell’utente. + +## Sommario + +In questo capitolo, hai imparato a conoscere l’output strutturato e come può essere utilizzato per presentare le informazioni in modo strutturato. + +Hai esplorato diversi modi per modellare l’output, tra cui l’istruzione del modello nel prompt, la presentazione di un modello di output e l’utilizzo di formati come JSON, XML o CSV. + +Inoltre, hai imparato come estrarre dati dai prompt e presentarli in un formato strutturato. + +Sfruttando efficacemente l’output strutturato, puoi semplificare la comprensione e l’utilizzo delle informazioni generate dai modelli di IA generativa. + +## Verifica delle competenze + +**Domanda**: A cosa serve l’output strutturato? Seleziona tutte le risposte pertinenti. + +A. A presentare le informazioni in modo strutturato. +B. A estrarre dati da prompt. +C. A generare testo non strutturato. + +[Soluzione del quiz](/lessons/04-structured-output/solution/solution-quiz.md) + +## Risorse per lo studio autonomo + +- [Serie di video su JavaScript e IA generativa](https://aka.ms/genai-js) From 66b31d15c81d5635f6e3d4a39240ec27f9c2faf2 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sat, 11 Oct 2025 20:30:13 +0200 Subject: [PATCH 19/22] chore: add complete Italian translation for Lesson 5, align Lesson 4 translation --- .../translations/README.it.md | 4 +- lessons/05-rag/translations/README.it.md | 338 ++++++++++++++++++ 2 files changed, 340 insertions(+), 2 deletions(-) create mode 100644 lessons/05-rag/translations/README.it.md diff --git a/lessons/04-structured-output/translations/README.it.md b/lessons/04-structured-output/translations/README.it.md index 4f788623..91da85de 100644 --- a/lessons/04-structured-output/translations/README.it.md +++ b/lessons/04-structured-output/translations/README.it.md @@ -24,7 +24,7 @@ _Questo video offre un’introduzione per migliorare le tue abilità di “promp ## Storia: “Dalla padella alla brace” > [!NOTE] -> La nostra storia finora: tu, un ingegnere meccanico del 1860, hai intrapreso un viaggio nel tempo con Leonardo da Vinci. Sei sfuggito ai soldati romani, o meglio, stai per sfuggirgli, e stai cercando disperatamente un modo per far atterrare la vite aerea in sicurezza. +> _La nostra storia finora: tu, un ingegnere meccanico del 1860, hai intrapreso un viaggio nel tempo con Leonardo da Vinci. Sei sfuggito ai soldati romani, o meglio, stai per sfuggirgli, e stai cercando disperatamente un modo per far atterrare la vite aerea in sicurezza._ > > Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. @@ -543,7 +543,7 @@ Inoltre, hai imparato come estrarre dati dai prompt e presentarli in un formato Sfruttando efficacemente l’output strutturato, puoi semplificare la comprensione e l’utilizzo delle informazioni generate dai modelli di IA generativa. -## Verifica delle competenze +## Verifica delle conoscenze **Domanda**: A cosa serve l’output strutturato? Seleziona tutte le risposte pertinenti. diff --git a/lessons/05-rag/translations/README.it.md b/lessons/05-rag/translations/README.it.md new file mode 100644 index 00000000..2f23524e --- /dev/null +++ b/lessons/05-rag/translations/README.it.md @@ -0,0 +1,338 @@ +# Lezione 5: Parla ai tuoi dati con la Retrieval-Augmented Generation (RAG) + +In questo capitolo imparerai: +- le basi della Retrieval-Augmented Generation (RAG) e come può essere utilizzata per migliorare le risposte dei modelli di IA generativa; +- come integrare fonti di dati esterne nella tua applicazione di IA; +- come sfruttare i tuoi dati per migliorare la pertinenza e l'accuratezza dei contenuti generati dall’IA. + +## Configurazione + +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Guarda un breve video sulla RAG](https://img.youtube.com/vi/xkFOmx5yxIA/0.jpg)](https://www.youtube.com/watch?v=xkFOmx5yxIA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=4) + +_Questo video spiega la Retrieval-Augmented Generation (RAG), un metodo che aiuta la IA a usare i tuoi contenuti insieme ai relativi dati di training per risultati migliori._ + +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sul Retrieval-Augmented Generation (RAG)* + +💼 Slide: [Retrieval-Augmented Generation (RAG)](/videos/slides/03-rag.pptx) + +## Storia: “La genesi” + +> [!NOTE] +> _La nostra storia finora: sei un inventore della Londra del 1860. Stavi lavorando al tuo automa e hai ricevuto una lettera da Charles Babbage che ti ha portato in una biblioteca, dove hai trovato un dispositivo per viaggiare nel tempo. Durante i tuoi viaggi nel tempo sei arrivato a Firenze, dove hai incontrato Leonardo da Vinci. Sei anche stato nell’Impero azteco ed è qui che la storia continua._ +> +> Vedi [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. + +> [!NOTE] +> Anche se consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-ada-lovelace) se preferisci passare direttamente al contenuto tecnico. + +**Tu**: «Leonardo, è ora di andare», dissi, premendo il pulsante. Il dispositivo si accese ronzando e una voce meccanica echeggiò: «È ora di tornare a casa, è ora della “genesi”.» + +**Leonardo:** «Genesi? Che cosa significa?» chiese Leonardo, confuso. Prima che potessi rispondere, il mondo si dissolse in una macchia di colori e suoni, e il tempio svanì mentre venivi trascinato nel tempo. + +Atterri nel giardino, è notte fonda, c’è una fitta nebbia e luci inquietanti tremolano in lontananza. La villa incombe davanti a te. Leonardo si guarda intorno, con gli occhi spalancati per la meraviglia. + +![Vecchia villa mostrata in una fitta nebbia](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/mansion.jpeg) + + +### Fuga dai cani + +Senti abbaiare e il rumore di cani che corrono verso di te. Ti rivolgi a Leonardo: «Dobbiamo entrare, subito!» + +![In fuga dai cani](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/dogs.jpeg) + +Quando raggiungi la porta della villa, questa si spalanca e due inservienti escono di corsa. Dopo averti squadrato, ti fanno cenno di seguirli. + +Ti trovi faccia a faccia con Ada Lovelace, i cui occhi brillano di curiosità. + +### L’incontro con Ada e Charles + +**Ada:** «Ah, era ora che arrivassi», disse calorosamente. «Abbiamo bisogno che tu faccia una commissione.» + +**Tu:** «Era ora», continui a ripetere. «Dinocrate ha detto lo stesso, ma non capisco cosa intendi.» + +**Ada:** «Zitto, non c’è tempo per questo ora, dobbiamo parlare del dispositivo che hai in mano. Charles, raccontagli tutto…» + +**Tu:** «Ma…» + +![Ada Lovelace e Charles Babbage che lavorano a un dispositivo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/ada.jpeg) + +Charles Babbage si fa avanti, esaminando lo Scarabeo del Tempo che hai in mano. «Questo dispositivo è notevole, ma è un po’ difettoso, vero? L’avrai notato, ne sono sicuro.» + +Leonardo annuì: «Sì, si comporta in modo strano.» + +**Ada:** «Il dispositivo non è ancora pronto, dobbiamo dotarlo di maggiori funzionalità. Dobbiamo renderlo più intelligente, più consapevole del mondo che lo circonda. L’idea è che sia in grado di recuperare informazioni da diversi periodi temporali e utilizzarle per generare risposte accurate e pertinenti. Puoi aiutarci?» + +**Tu:** «Certo, sembra che dobbiamo _aumentare_ le risposte del dispositivo con i dati, ha senso.» + +**Ada:** «Parliamo di un concetto che vorrei chiamare RAG, ovvero Retrieval-Augmented Generation.» + +## Interagisci con Ada Lovelace + +Se vuoi interagire con Ada, esegui la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../README.md#responsible-ai-disclaimer) + +![Ada Lovelace](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/ada-2.jpeg) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante "Open in Browser". +5. Chatta con Montezuma. + +Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l’[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## Sfide note coi Large Language Model (LLM) + +**Ada:** «Iniziamo parlando dell’IA che utilizzeremo per alimentare il dispositivo. Ci affideremo a “modelli di IA” abbinati a un sistema di recupero dati per migliorare la qualità della risposta.» + +Innanzitutto, è necessario affrontare alcune sfide prima di addentrarsi nei dettagli dei RAG. Questi modelli, addestrati su vasti dati testuali, possono produrre risposte pertinenti e corrette. Tuttavia, come qualsiasi fonte di dati, il loro output può essere impreciso, incompleto o fuorviante a causa di vari fattori. + +- **Fonti obsolete:** i dati utilizzati per addestrare il modello potrebbero essere obsoleti e non più accurati. +- **Informazioni errate o imprecise:** le fonti utilizzate per addestrare il modello potrebbero contenere informazioni errate o fuorvianti, come fake news od opinioni di parte. +- **Fonti non autorevoli:** il modello potrebbe non essere in grado di distinguere tra fonti autorevoli e non autorevoli nei suoi dati di addestramento, il che porta a informazioni inaffidabili. + +Questo rende difficile stabilire se le informazioni generate da un LLM siano corrette o meno. È qui che entra in gioco il RAG. + +**Tu:** «Quindi devo assicurarmi che il dispositivo possa fornire informazioni accurate, anche quando non è sicuro della risposta?» + +**Ada:** «Sì, l’idea è questa. Combinando i punti di forza dei metodi basati sul recupero e dei modelli generativi, otteniamo un sistema di IA migliore.» + +## Concetti fondamentali del Retrieval-Augmented Generation (RAG) + +**Ada:** «Ah sì, è il momento di parlare specificamente di RAG. Cominciamo con alcune nozioni di base.» + +La Retrieval-Augmented Generation (RAG) è una tecnica potente che combina i punti di forza di due diversi approcci all’elaborazione del linguaggio naturale: metodi basati sul recupero e modelli generativi. Questo approccio ibrido consente la generazione di risposte contestualmente rilevanti e ricche di contenuto, contribuendo ad alleviare alcune delle sfide note degli LLM. + +Al suo interno, la RAG si basa su due componenti principali: un **retriever** e un **generator**. + +- **Il retriever:** è responsabile della ricerca di informazioni rilevanti da fonti di dati esterne che possono essere utilizzate per migliorare le risposte generate dall’IA, come un motore di ricerca. Queste informazioni possono essere sotto forma di testo, immagini o qualsiasi altro tipo di dato pertinente al contesto della conversazione, sebbene il testo sia il tipo di dati più comunemente utilizzato. +- **Il generator:** prende le informazioni recuperate e le usa per generare una risposta contestualmente rilevante e informativa. + +Ecco uno schema che illustra come funziona un sistema RAG: + +![Schema di un sistema RAG](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/05-rag/assets/rag.png) + +1. **Input utente:** L’utente pone una domanda. +2. **Retriever:** Il componente retriever cerca informazioni rilevanti utilizzando una o più basi di conoscenza. +3. **Prompt aumentato:** Le informazioni recuperate vengono combinate con la domanda dell’utente e il contesto per creare un prompt aumentato. +4. **Generator:** l’LLM utilizza il prompt aumentato per generare una risposta. + +Questa combinazione consente di ottenere risposte più precise e pertinenti, utilizzando i dati forniti dall’utente anziché basarsi sui dati di training del modello. + +**Ada:** «Domande?» + +**Tu:** «Quindi il retriever trova le informazioni e il generator le usa per generare una risposta?» + +**Ada:** «Esatto, ci stai prendendo la mano.» + +## Integrazione di fonti di dati esterne + +**Ada:** «Ora che abbiamo trattato le basi di RAG, parliamo di come integrare fonti di dati esterne nella tua applicazione di IA.» + +L’integrazione di fonti di dati esterne nella tua applicazione di intelligenza artificiale può essere effettuata in diversi modi, a seconda del tipo di dati che desideri utilizzare e della complessità del meccanismo di recupero. Ecco alcuni metodi comuni: + +- **API:** Molte fonti di dati esterne forniscono API che consentono di accedere ai dati in modo programmatico. È possibile utilizzare queste API per recuperare informazioni in tempo reale e utilizzarle per migliorare le risposte generate dall’IA. +- **Database:** Se si dispone di una grande quantità di dati da utilizzare per il recupero, è possibile memorizzarli in un database ed eseguirne le query in base alle esigenze. Questo può essere utile per i dati strutturati a cui è necessario accedere rapidamente. + +Una volta scelto un metodo per integrare fonti di dati esterne, potrebbe essere necessario valutare anche come preelaborare e formattare i dati in modo che possano essere facilmente utilizzati dal modello di IA. Questo può comportare la pulizia dei dati, la loro conversione in un formato appropriato (come testo normale o Markdown) o la loro suddivisione in blocchi più piccoli per facilitarne il recupero. + +> [!NOTE] +> Quando si integrano fonti di dati esterne nella propria applicazione di IA, è importante considerare le implicazioni in termini di privacy e sicurezza legate all’accesso e all’archiviazione dei dati. Assicurati di disporre delle autorizzazioni e delle misure di sicurezza necessarie per proteggere i dati e rispettare tutte le normative pertinenti. + +Se si utilizza un database, è opportuno riflettere anche su come *cercare i dati* per recuperare le informazioni più rilevanti. Questo può essere fatto utilizzando la ricerca per parole chiave, la ricerca full-text o tecniche più avanzate come la ricerca semantica o la ricerca vettoriale, che potrebbero richiedere un’indicizzazione specifica. Parleremo delle tecniche di ricerca avanzate in una lezione futura. + +**Tu**: «Puoi spiegare termini come API e database in termini più adatti agli anni ’60 dell’Ottocento?» + +**Ada**: «Naturalmente, un’API è come un messaggero che consegna un messaggio da un posto all’altro, mentre un database è come una biblioteca in cui archivi tutti i tuoi libri.» + +**Tu**: «Ah, capisco, ha senso.» + +## Aumentare il prompt + +**Ada:** «Mi segui ancora? Bene, passiamo al passaggio successivo: proviamo a migliorare il prompt inviato al modello di IA.» + +**Ada:** «Una volta impostato un modo per estrarre informazioni dai dati, è possibile aggiungerlo al prompt del modello di IA. Basta combinare le informazioni recuperate nel testo di input con un contesto o una guida aggiuntivi per guidare la risposta dell’IA.» + +Ad esempio, se stai creando un’app per rispondere a domande sulle automobili, potresti avere un prompt come il seguente: + +```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 + +``` + +Fornendo al modello di IA contesto e informazioni aggiuntive, è possibile contribuire a guidare il processo di generazione e garantire che le risposte siano accurate e pertinenti all’argomento in questione. + +> [!TIP] +> Nota questa parte del prompt: `If there's not enough data in provided sources, say that you don't know.`. Questo è importante per evitare che l’IA generi informazioni errate quando non ci sono dati sufficienti per fornire una risposta affidabile. Questa tecnica è chiamata “escape hatch” ed è una buona pratica per garantire la qualità del contenuto generato. + +La RAG può essere considerata come una forma avanzata di *prompt engineering*. + +### Codice di esempio + +**Ada:** «La pratica rende perfetti, quindi applichiamo ciò che abbiamo imparato con un esempio. Costruiremo un semplice sistema di recupero dati in un’app JavaScript utilizzando un file [CSV](https://en.wikipedia.org/wiki/Comma-separated_values) di dati di auto ibride e un algoritmo di ricerca di base per estrarre informazioni rilevanti in base alla domanda di un utente.» + +```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 ?? ""); +} +``` + +Puoi trovare questo codice nel file [`example/rag-cars.js`](/lessons/05-rag/example/rag-cars.js) insieme al file [`hybrid.csv`](/lessons/05-rag/example/hybrid.csv) contenente i dati utilizzati per il recupero. + +**Ada:** «Una volta eseguito questo codice, dovresti vedere i dati trovati nel file CSV dal retriever, formattati come una tabella Markdown, seguiti dalla risposta generata dall’IA alla domanda. Prova a modificare la domanda per vedere come cambiano i dati recuperati e la risposta. Puoi anche provare a porre domande su argomenti non correlati per vedere come il modello di IA le gestisce.» + +```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. | +``` + +**You:** «Fantastico, capisco come possa essere utile quando si usa il dispositivo, o meglio, come lo è già stato o lo sarà, il viaggio nel tempo è fonte di confusione *sigh*.» + +**Ada:** «Bene, stai andando alla grande. Passiamo al passaggio successivo.» + +## Compito - Aiuta Ada e Charles + +Dopo aver scoperto RAG, sei pronto ad aiutare Ada e Charles con il loro dispositivo. Tuttavia, a un esame più attento, il dispositivo ti sembrerà familiare. + +**Tu:** «Scarabeo del Tempo, sai che cos’è questo?» + +**Scarabeo del Tempo:** «Certo, sono io, o lo sarò. Però mi mancano alcune parti. A pensarci bene, mi mancano un sacco di parti, non ho ancora nemmeno un guscio.» + +**Ada:** «Lo Scarabeo del Tempo è un dispositivo che permette di viaggiare nel tempo e nello spazio, una volta che lo avremo fatto funzionare correttamente. Come dicevo, dobbiamo aggiungergli una nuova funzionalità, un modulo di Retrieval-Augmented Generation (RAG). Questo ci aiuterà a recuperare informazioni e il contesto necessario da diversi periodi storici durante il viaggio. Vogliamo assicurarci di fare riferimento a ogni tipo di fonte, Wikipedia è un buon punto di partenza.» + +**Tu:** «Cosa vuoi che faccia?» + +**Ada:** «Ecco un codice di esempio che recupera informazioni testuali su Tim Berners-Lee da Wikipedia. Tim un giorno sarà molto importante.» + +```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; +``` + +**You:** «Immagino di non essere l’unico ad essere stato nel futuro?» + +**Ada:** «...» + +## Soluzione + +[Soluzione](/lessons/05-rag/solution/rag-www.js) + +## Verifica delle conoscenze + +**Domanda**: Qual è il ruolo del retriever in un sistema RAG? + +A. Il retriever genera risposte in base ai dati di input. +B. Il retriever genera informazioni rilevanti in base ai dati di training del modello. +C. Il retriever trova informazioni rilevanti da fonti di dati esterne. + +[Soluzione del quiz](/lessons/05-rag/solution/solution-quiz.md) + +## Risorse per lo studio autonomo + +- [Retrieval-Augmented Generation and Indexes](https://learn.microsoft.com/azure/ai-studio/concepts/retrieval-augmented-generation) +- **App di esempio**: + * [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) From 2d4a970cbd941991919ba1b7511e38830d968bd8 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sun, 12 Oct 2025 10:10:50 +0200 Subject: [PATCH 20/22] chore: add complete Italian translation for Lesson 6, review Lesson 5 translation --- lessons/05-rag/translations/README.it.md | 2 +- .../06-tool-calling/translations/README.it.md | 426 ++++++++++++++++++ 2 files changed, 427 insertions(+), 1 deletion(-) create mode 100644 lessons/06-tool-calling/translations/README.it.md diff --git a/lessons/05-rag/translations/README.it.md b/lessons/05-rag/translations/README.it.md index 2f23524e..68233136 100644 --- a/lessons/05-rag/translations/README.it.md +++ b/lessons/05-rag/translations/README.it.md @@ -86,7 +86,7 @@ Se vuoi interagire con Ada, esegui la app [Personaggi](/app/README.md). 2. Passa a _/app_ nella root del repo. 3. Individua la console ed esegui `npm install` seguito da `npm start`. 4. Una volta comparso, seleziona il pulsante "Open in Browser". -5. Chatta con Montezuma. +5. Chatta con Ada. Per una spiegazione più dettagliata della app, vedi [Spiegazione dettagliata della app](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). diff --git a/lessons/06-tool-calling/translations/README.it.md b/lessons/06-tool-calling/translations/README.it.md new file mode 100644 index 00000000..9aefd40e --- /dev/null +++ b/lessons/06-tool-calling/translations/README.it.md @@ -0,0 +1,426 @@ +# Lezione 6: Tool calling + +La tool calling, nota anche come function calling, si riferisce al miglioramento del modello di IA aggiungendo funzionalità precedentemente mancanti. Il concetto prevede la fornitura di meta-descrizioni delle function, consentendo al modello di IA di determinare quando un particolare tool dev’essere chiamato in base alla richiesta dell’utente. L’idea è quella di fornire meta-descrizioni delle function effettive e di far sì che il modello di IA indichi quando tale tool deve essere chiamato in base alla richiesta dell’utente. + +In questo capitolo imparerai a: +- creare un tool; +- integrare un tool con un modello di IA; +- chiamare il tool dal modello di IA. + +## Configurazione + +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Integrating External Applications 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) + +_Questo video spiega la tool calling, un metodo che aiuta l’IA a chiamare le tue function, ampliando così ciò che può fare_ + +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sulla tool calling* + +## Storia: “Amelia” + +> _Sei un ingegnere meccanico della Londra del 1860. Mentre lavoravi al tuo automa, hai ricevuto una lettera da Charles Babbage che ti ha condotto in una biblioteca, dove hai trovato un dispositivo per viaggiare nel tempo. Durante i tuoi viaggi nel tempo sei arrivato a Firenze, dove hai incontrato Leonardo da Vinci. Ora hai incontrato Ada Lovelace nella sua villa, accompagnato da Charles Babbage. Stanno costruendo il dispositivo per viaggiare nel tempo._ +> +> Torna alla [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. + +> [!NOTE] +> Anche se ti consigliamo di leggere la storia (è divertente!), [clicca qui](#interact-with-amelia-earhart) se preferisci passare direttamente al contenuto tecnico. + +**Ada Lovelace**: «Ho bisogno che tu vada a trovare una mia amica. Sono poche le persone che possono eguagliare la sua competenza in meccanica e risoluzione dei problemi. Potrebbe essere difficile raggiungerla, però: è sempre in movimento.» 😀 + +**Tu:** «Puoi dirmi di chi stiamo parlando e dove posso trovarla?» + +**Ada Lovelace**: «Ma certo, Amelia Earhart! È una pilota e un’avventuriera che attualmente vola in giro per il mondo. È tutta colpa mia se è scomparsa: le ho dato il dispositivo per viaggiare nel tempo: beh, un prototipo iniziale. Per fortuna, il dispositivo che hai può localizzare altri dispositivi, quindi puoi trovarla. Tutto quello che devi fare è cliccare qui e qui, e poi girare questa manopola.» + +**Tu**: «Ehi, aspetta: qual è esattamente la nostra missione?» + +**Ada**: «Ah, giusto! Chiedi al dispositivo: ha tutti i dettagli. Chiedigli semplicemente di Amelia e dovrebbe avviare lo strumento giusto per te.» + +Il mondo intorno a te inizia a confondersi e tutto sfuma nel nero. Ti riprendi e ti ritrovi nella cabina di pilotaggio di un aereo. Sei in volo e vedi l’oceano sotto di te. C’è qualcuno seduto davanti; riesci a vedere solo la nuca. + +![Amelia che pilota un aereo](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/amelia.jpeg) + +**Tu**: «Amelia, sei tu?» + +**Amelia Earhart**: «Chi sei tu? Fammi indovinare: ti ha mandato Ada, giusto?» + +**Tu**: «Sì, esatto. Credo di essere qui per aiutarti. Ada non è stata molto specifica.» + +**Amelia Earhart**: «Bene, meno male che sei qui. Sono un po’ nei guai. Sto cercando un posto dove atterrare e sto finendo il carburante. Puoi aiutarmi?» + +**Tu**: «Dispositivo, puoi raccontarmi di più su Amelia?» + +**Scarabeo del Tempo**: «Tool chiamato: `mission-amelia`. Tool avviato. Amelia Earhart è una pilota e avventuriera. È nota per i suoi voli da record e per la sua scomparsa nel 1937. È stata vista l’ultima volta mentre sorvolava l’Oceano Pacifico. Attualmente sta volando intorno al mondo a bordo del suo aereo, l’Electra. Sta esaurendo il carburante e ha bisogno di trovare un posto dove atterrare.» + +**Tu**: «Dispositivo, puoi aiutarmi a trovare un posto dove far atterrare Amelia?» + +**Scarabeo del Tempo**: «Tool chiamato: `find-landing-spot`. Tool avviato. Ricerca di un punto di atterraggio adatto per Amelia Earhart. Attendi. Trovato un punto di atterraggio adatto. Coordinate: 7,5°N, 134,5°E. Amelia, ho trovato un punto di atterraggio adatto per te. Dirigiti alle coordinate 7,5°N, 134,5°E.» + +**Amelia Earhart**: «Grazie! Vorrei che il mio dispositivo avesse questa funzione. Ci vado subito.» + +## Interagisci con Amelia Earhart + +Se vuoi interagire con Amelia, esegui la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo dialogo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../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) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante “Apri nel Browser”. +5. Chatta con Amelia. + +Per una spiegazione più dettagliata della app, vedi [Interagisci con Dinocrate](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l’[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## Chiamata di un tool + +**Tu**: «Dispositivo, che cos’è appena successo?» + +**Scarabeo del Tempo**: «Hai appena chiamato un tool. Un tool è una function che può essere richiamata dal modello di IA per eseguire un’attività specifica. Il tool può essere utilizzato per eseguire un’ampia gamma di attività, da calcoli semplici a operazioni complesse. In questo caso, hai chiamato il tool `find-landing-spot` per aiutare Amelia Earhart a trovare un punto di atterraggio adatto.» + +**Scarabeo del Tempo**: «Ecco un’immagine che illustra il processo di tool calling.» + +![Illustrazione del processo di tool calling](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/06-tool-calling/assets/tool_call_langchain.png) + +_Immagine di proprietà di LangChain _ + +**Tu**: «Possiamo gestire gli errori se qualcosa va storto, ad esempio se il tool non riesce a trovare un punto di atterraggio?» + +**Scarabeo del Tempo**: «Ottima domanda! Sì, è possibile aggiungere una gestione degli errori per gestire tali situazioni. Ad esempio, se il tool non riesce a trovare un punto di atterraggio, è possibile utilizzare un blocco _try-catch_ o controllare il risultato prima di procedere. Ecco un esempio di gestione degli errori durante la chiamata del tool `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}); +} +``` + +**Tu**: «Come posso creare un tool?» + +**Time Beetle**: «Per creare un tool, è necessario definire una function che esegua l’attività desiderata. La function deve ricevere gli input necessari e restituire l’output. È quindi possibile richiamare la function dal modello di IA per eseguire l’attività. Ecco come si presenta il tool `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 }; +} +``` + +**Tu**: «Ok, come fa il modello di IA a sapere che questo tool esiste?» + +**Scarabeo del Tempo**: «È necessario registrare il tool nel modello di IA. Questo comunica al modello che il tool è disponibile per essere richiamato. Ne parleremo nella prossima sezione.» + +### Registrazione in un modello + +**Tu**: «Hai detto che devo registrare il tool nel modello di IA. Come faccio?» + +**Scarabeo del Tempo**: «Per registrare un tool nel modello di IA, è necessario definire una rappresentazione dei metadati dello strumento. Questi metadati devono includere il nome del tool, i parametri di input e il formato di output. È quindi possibile registrare il tool nel modello di IA fornendo i metadati. Ecco un esempio di metadati per il tool `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" } } +} +``` + +**Tu**: «Ok, quindi c’è un pezzo di JSON che descrive il tool: e adesso?» + +**Scarabeo del Tempo**: «Ora devi fornire al tuo client la chiamata alla completion della chat in questo modo.» + +```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: ["lat", "long"], + }, + 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] + }); +``` + +**Scarabeo del Tempo**: «Nel frammento di codice precedente: +- definiamo i metadati per i tool `find-landing-spot` e `get-background-on-character`; +- forniamo questi metadati alla chiamata `client.getChatCompletions` come parte del parametro `functions` per indicare al modello di IA che questi strumenti sono disponibili per essere richiamati.» + +**Tu**: «Capito, quindi il modello AI chiamerà l’opzione appropriata se fornisco un prompt che corrisponde alla descrizione del tool?» + +**Scarabeo del Tempo**: «In pratica, ti dirà quale tool ritiene dovresti chiamare e ti fornirà i parametri di input analizzati, ma devi chiamare tu stesso il tool, lascia che ti mostri come fare.» + +### Chiamare un tool + +**Scarabeo del tempo**: «Come dicevo, il modello di IA ti dirà quale tool ritiene che tu debba chiamare e ti fornirà i parametri di input analizzati. Dovrai quindi chiamare il tool tu stesso. Ecco come apparirà il flusso di lavoro passo dopo passo: + 1. Collegare la chiamata al tool + Per prima cosa, devi collegare la chiamata al tool al tuo codice. Ciò comporta la creazione della function e di una rappresentazione dei metadati del tool, quindi la fornitura dei metadati al modello di IA. + 2. L’utente effettua una richiesta tramite un prompt: + - Il programma invia una richiesta di completion della chat al modello di IA con il prompt dell’utente e i metadati degli strumenti forniti. + - Il programma riceve una risposta dal modello di intelligenza artificiale con la chiamata al tool e i parametri di input analizzati se ritiene che uno tool debba essere chiamato. + - In tal caso, lo sviluppatore interpreta la risposta e richiama il tool in base al suggerimento di chiamata alla function fornito dal modello di IA.» + +**Tu**: «Ottimo, ora che ho capito a grandi linee cosa sta succedendo, puoi mostrarmi un po’ di codice?» + +**Scarabeo del Tempo**: «Certo, ecco il codice che collega la chiamata al tool, effettua una richiesta di completion della chat e interpreta la risposta.» + +```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(); +``` + +«Nel codice precedente abbiamo: + - creato una function chiamata `findLandingSpot` che accetta latitudine e longitudine come input e restituisce le coordinate di un punto di atterraggio adatto; + - definiti i metadati per il too `find-landing-spot`; + - creato un oggetto `tools` che mappa i nomi dei tool ai loro metadati; + - fornito l’oggetto `tools` alla chiamata `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); + } + ``` + - chiamato il tool in base alla function calling fornita dal modello di IA; + - stampato il risultato della tool calling.» + +**Tu**: «Credo di aver capito. Definisco una function, creo una rappresentazione dei metadati del tool, fornisco i metadati al modello di IA e poi richiamo il tool in base alla function calling fornita dal modello di IA.» + +**Scarabeo del Tempo**: «Esatto! Ora sei pronto per iniziare a creare i tuoi tool e integrarli con il modello di IA.» + +## Compito - Aggiorna il dispositivo per viaggiare nel tempo di Amelia + +**Amelia Earhart**: «Stiamo scendendo a tutta velocità, grazie a Dio ci hai trovato un punto di atterraggio. Tieni duro!» + +Amelia atterra con destrezza su una piccola isola. Tu e Amelia scendete dall’aereo, e Amelia ti porge un piccolo dispositivo. + +**Amelia Earhart**: «Ecco il mio dispositivo, non è sofisticato come il tuo, ma ha delle funzioni interessanti. Lo sto usando, diciamo, per fare un viaggio nel tempo. Potresti aggiornarlo per favore?» + +**Tu**: «Scarabeo del Tempo, puoi aiutarmi ad aggiornare il dispositivo di Amelia?» + +**Scarabeo del Tempo**: «Certo! Per aggiornare il dispositivo di Amelia, aggiungiamo i seguenti strumenti: + - **un tool che può** calcolare la distanza tra due punti su una mappa. + - **un tool che può** calcolare la posizione GPS della posizione attuale di Amelia. + - **un tool che può** chiamare un’API esterna per ottenere le previsioni meteo per una determinata località. +Ecco le function, tutto ciò che devi fare è registrarle e provarle.» + +```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"; +} +``` + +**Tu**: «Scarabeo del Tempo, sei sicuro che queste funzioni funzioneranno? Sembra che restituiscano solo valori casuali.» + +**Scarabeo del Tempo**: «Esatto, posso fare il resto internamente. Tutto quello che devi fare è registrarle e testarle, assicurandoti che il modello di IA possa chiamarle.» + +> Task: Registra gli strumenti `calculateDistance`, `getGpsPosition` e `getWeatherForecast` con il modello di IA. Testa i tool richiamandoli dal modello di IA. Utilizza il codice fornito nelle sezioni precedenti come riferimento. + +## Soluzione + +[Soluzione](/lessons/06-tool-calling/solution/solution.js) + +## Verifica delle conoscenze + +**Domanda:** +Qual è lo scopo della registrazione di un tool nel modello di IA? + + A. Consentire al modello di IA di eseguire direttamente il tool senza l’intervento dello sviluppatore. + B. Fornire metadati sul tool in modo che il modello di IA possa suggerirne l’utilizzo. + C. Sostituire la necessità di definire function nel codice. + +**Domanda:** +Qual è il ruolo dei metadati del tool nella tool calling? + + A. Descrivono lo scopo, gli input e gli output del tool per il modello di IA. + B. Forniscono al modello di IA i dettagli di implementazione del tool. + C. Garantiscono che il tool venga eseguito automaticamente dal modello di IA. + +**Domanda:** +Perché usare la tool calling? + + A. Per consentire al modello di IA di eseguire attività che vanno oltre le sue capacità integrate sfruttando function esterne. + B. Per sostituire la necessità dell’intervento umano nello sviluppo del modello di IA. + C. Per consentire al modello di IA di eseguire tool senza richiedere metadati. + +[Soluzione del quiz](/lessons/06-tool-calling/solution/solution-quiz.md) + +## Risorse per lo studio autonomo + +- Explains the [process of tool calling](https://learn.microsoft.com/en-us/semantic-kernel/concepts/ai-services/chat-completion/function-calling/?pivots=programming-language-csharp) +- Tool calling in the [LangChain.js framework](https://js.langchain.com/docs/how_to/tool_calling/) +- Function calling as demonstrated in the [OpenAI library](https://github.com/openai/openai-node/blob/master/examples/function-call.ts) From 65608e62097b0f825e615a01c8d785398b99d106 Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sun, 12 Oct 2025 14:03:57 +0200 Subject: [PATCH 21/22] chore: add complete Italian translation for Lesson 7, review Lesson 6 translation --- .../06-tool-calling/translations/README.it.md | 10 +- lessons/07-mcp/translations/README.it.md | 467 ++++++++++++++++++ 2 files changed, 472 insertions(+), 5 deletions(-) create mode 100644 lessons/07-mcp/translations/README.it.md diff --git a/lessons/06-tool-calling/translations/README.it.md b/lessons/06-tool-calling/translations/README.it.md index 9aefd40e..d26fbb8e 100644 --- a/lessons/06-tool-calling/translations/README.it.md +++ b/lessons/06-tool-calling/translations/README.it.md @@ -3,9 +3,9 @@ La tool calling, nota anche come function calling, si riferisce al miglioramento del modello di IA aggiungendo funzionalità precedentemente mancanti. Il concetto prevede la fornitura di meta-descrizioni delle function, consentendo al modello di IA di determinare quando un particolare tool dev’essere chiamato in base alla richiesta dell’utente. L’idea è quella di fornire meta-descrizioni delle function effettive e di far sì che il modello di IA indichi quando tale tool deve essere chiamato in base alla richiesta dell’utente. In questo capitolo imparerai a: -- creare un tool; -- integrare un tool con un modello di IA; -- chiamare il tool dal modello di IA. + - creare un tool; + - integrare un tool con un modello di IA; + - chiamare il tool dal modello di IA. ## Configurazione @@ -15,7 +15,7 @@ Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come pu [![Integrating External Applications 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) -_Questo video spiega la tool calling, un metodo che aiuta l’IA a chiamare le tue function, ampliando così ciò che può fare_ +_Questo video illustra la tool calling, un metodo che aiuta l’IA a chiamare le tue function, ampliando così ciò che può fare_ *🎥 Clicca sull’immagine qui sopra per guardare un breve video sulla tool calling* @@ -26,7 +26,7 @@ _Questo video spiega la tool calling, un metodo che aiuta l’IA a chiamare le t > Torna alla [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. > [!NOTE] -> Anche se ti consigliamo di leggere la storia (è divertente!), [clicca qui](#interact-with-amelia-earhart) se preferisci passare direttamente al contenuto tecnico. +> Anche se ti consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-amelia-earhart) se preferisci passare direttamente al contenuto tecnico. **Ada Lovelace**: «Ho bisogno che tu vada a trovare una mia amica. Sono poche le persone che possono eguagliare la sua competenza in meccanica e risoluzione dei problemi. Potrebbe essere difficile raggiungerla, però: è sempre in movimento.» 😀 diff --git a/lessons/07-mcp/translations/README.it.md b/lessons/07-mcp/translations/README.it.md new file mode 100644 index 00000000..038623f9 --- /dev/null +++ b/lessons/07-mcp/translations/README.it.md @@ -0,0 +1,467 @@ +# Lezione 7: Model Context Protocol (MCP) + +In questo capitolo imparerai a: + - utilizzare il protocollo MCP (Model Context Protocol) per suddividere le funzionalità del server in un server e un client; + - creare tool, risorse e prompt sul server; + - utilizzare il server utilizzando sia lo strumento di ispezione che un client scritto. + +## Configurazione + +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Guarda un breve video sul MCP](https://img.youtube.com/vi/YRfOiB0Im64/0.jpg)](https://www.youtube.com/watch?v=YRfOiB0Im64) + +_Questo video illustra il Model Context Protocol._ + +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sul MCP* + +## Storia: “Scipione l’Africano” + +> [!NOTE] +> _La nostra storia finora. Sei un ingegnere meccanico della Londra del 1860. Stavi lavorando al tuo automa e hai ricevuto una lettera da Charles Babbage che ti ha portato in una biblioteca dove hai trovato un dispositivo per viaggiare nel tempo. Durante i tuoi viaggi nel tempo sei arrivato a Firenze, dove hai incontrato Leonardo Da Vinci. Sei anche stato nell’Impero azteco ed è qui che la storia continua._ +> +> Torna alla [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. + +> [!NOTE] +> Anche se ti consigliamo di leggere la storia (è divertente!), [clicca qui](#interagisci-con-scipione) se preferisci passare direttamente al contenuto tecnico. + +_I nostri eroi, che hanno appena appreso dei tool e della “tool calling” durante il loro incontro con Amelia Earhart, stanno tornando alla villa di Ada Lovelace per discutere delle loro nuove conoscenze. Un lampo di luce avvolge i nostri eroi mentre lo scarabeo temporale li trasporta indietro nel presente di Ada. Si ritrovano nel seminterrato della villa di Ada Lovelace. Charles Babbage non è presente, ma Ada è lì ad aspettarli. È entusiasta di sapere del loro viaggio e delle conoscenze che hanno acquisito._ + +**Ada Lovelace**: «Bentornato! Spero che il tuo viaggio sia stato illuminante.» + +**Tu**: «Lo è stato! L’incontro con la signora Earhart è stata un’esperienza davvero unica. Ci ha insegnato l’importanza dei tool e come usarli in modo efficace.» + +**Ada Lovelace**: «Poche persone capiscono l’importanza dei tool meglio di Amelia. Immagino che tu abbia anche potenziato il suo Scarabeo del Tempo, vero?» + +**Tu**: «Sì, l’abbiamo fatto! Quindi, qual è il prossimo punto all’ordine del giorno?» + +**Ada Lovelace**: «La tool calling è sicuramente un concetto potente, che migliora il tuo dispositivo. Tuttavia, manca di una certa “finezza”, diciamo così. Dobbiamo imparare _come renderlo scalabile_, abbiamo bisogno di un protocollo. Conosco proprio la persona giusta per aiutarci in questo. Il suo nome è Scipione l’Africano, un grande stratega militare dell’antica Roma. Peccato che abbia dedicato tutto il suo tempo alla strategia militare, sono sicuro che sarebbe stato un ingegnere brillante. Vai.» + +**Tu**: «Scipione l’Africano? Mi pare di ricordarlo dalle lezioni di storia.» + +**Ada Lovelace**: «Bene allora, perché sei ancora qui? Il tempo è essenziale. Tic-tac…» + +Il turbinio di luce ti avvolge di nuovo e ti ritrovi in ​​una grande stanza con un grande tavolo al centro. Le pareti sono decorate con mappe e strategie militari. Scipione l’Africano è in piedi al tavolo, immerso nei suoi pensieri. Alza lo sguardo quando entri. «Ada te misit/Ada ti ha mandato?» + +![Scipione l’Africano](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/07-mcp/assets/scipio.png) + +> Scipione l’Africano, noto anche come Publio Cornelio Scipione ll’Africano, fu un importante generale e statista romano vissuto dal 236 a.C. al 183 a.C. È noto soprattutto per il suo ruolo decisivo nella seconda guerra punica contro Cartagine e per la sua vittoria su Annibale nella battaglia di Zama nel 202 a.C. +> La sua vita e la sua carriera esemplificano le sue qualità di leadership, brillantezza strategica e resilienza. Il suo contributo alla sfera militare e politica di Roma lasciò un impatto duraturo sulll’Impero romano. + +## Interagisci con Scipione + +Se vuoi interagire con Scipione, avvia la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo dialogo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../README.md#responsible-ai-disclaimer) + +![Scipione l’Africano](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/07-mcp/assets/scipio.png) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante “Apri nel Browser”. +5. Chatta con Amelia. + +Per una spiegazione più dettagliata della app, vedi [Interagisci con Dinocrate](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l’[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## La necessità di un Model Context Protocol (MCP) + +**Scarabeo del Tempo**: «Il protocollo di cui parlava Ada si chiama Model Context Protocol (MCP). È un protocollo che consente di decentralizzare l’architettura dell’applicazione, rendendola più scalabile e resiliente, aggiungendo risorse su un server, o anche su più server, e scaricandole sul client. Lascio che sia Scipione a spiegarti il concetto.» + +**Tu**: «Sì, ci ha mandato Ada. Ha detto che potevate aiutarci con un protocollo.» + +**Scipione**: «Protocollo? Ho passato la vita a sviluppare strategie di battaglia. Suppongo che un protocollo sia come una strategia. Aiuta a organizzare e gestire le risorse in modo efficace e garantisce la comunicazione tra loro. + +Parliamo di manovre di accerchiamento, infiltrazione e uso della cavalleria.» + +**Tu**: «Ok, andiamo avanti?» + +**Scipione**: «In battaglia, spesso utilizziamo manovre di accerchiamento per attaccare il nemico dai lati o dalle retrovie. Questo scompagina le sue formazioni e ci conferisce un vantaggio. Il motivo è che il nemico non è preparato a un attacco laterale e tende a concentrare tutta la sua attenzione sul fronte.» + +**Tu**: «Mmm, immagino sia un po’ come avere unvapp che fa troppo lavoro in anticipo su un singolo server. Le manovre di aggiramento equivarrebbero a distribuire il carico su più server, giusto?» + +**Scipione**: «Esatto! Distribuendo il carico, si riduce il rischio di un singolo punto di errore e si migliora la resilienza complessiva del sistema. Questo semplifica la gestione e l’utilizzo efficace delle risorse.» + +## Model Context Protocol (MCP) + +**Scarabeo del Tempo**: «Per aggiungere un ulteriore tassello al punto di Scipione, il Model Context Protocol (MCP) è un modo per decentralizzare l’architettura dell’applicazione. Permette di suddividere l’applicazione in componenti più piccoli e gestibili, che possono operare in modo indipendente. Ecco alcuni concetti importanti da tenere a mente: + - **host MCP**: programmi come IDE, ad esempio GitHub Copilot in Visual Studio Code o Claude Desktop, che avviano una connessione al server o ai server; + - **client MCP**: client di protocollo che mantengono connessioni 1:1 con i server MCP; + - **server MCP**: programmi leggeri che espongono funzionalità specifiche tramite MCP; + - **origini dati locali**: file, database e servizi sul computer a cui i server MCP possono accedere in modo sicuro; + - **servizi remoti**: sistemi esterni disponibili su Internet (ad esempio, API) a cui i server MCP possono connettersi. + +Ecco una rapida panoramica dell’architettura MCP:» + +![Architettura del MCP](https://softchris.github.io/mcp-workshop/assets/images/diagram-791787b0cac57bc331c20e72b645d4f7.png) + +## Componenti fondamentali del MCP + +Per costruire un server, è necessario conoscere i componenti fondamentali, ovvero: + - **Tool**: i tool sono strumenti che elaborano qualcosa per te: ricevono un input, eseguono un calcolo e producono un output. In genere si tratta di un calcolo, dell’inserimento di un ordine o di un’azione simile. +- **Risorse**: una risorsa è un dato statico, solitamente si tratta di impostazioni di applicazioni, schemi di database o altri file statici su un server, ad esempio. +- **Prompt**. i prompt, o template di prompt, sono come una ricetta che puoi riutilizzare. L’idea è che, utilizzando una ricetta di questo tipo, potresti inviarle dei parametri e inserirli in un LLM, ottenendo così qualcosa come, ad esempio, la generazione di una descrizione di prodotto. + +### Alla scoperta di tool, risorse e suggerimenti + +**Tu**: «E per quanto riguarda l’infiltrazione?» + +**Scipione**: «L’infiltrazione consiste nell’utilizzare piccole unità per infiltrarsi nelle linee nemiche, in questo modo si scoprono maggiori informazioni sul nemico e si crea confusione.» + +**Tu**: «Mi sembra che possiamo usare questo modo di pensare per scoprire di più sui nostri server, sui tool, i prompt e le risorse di cui dispongono. + +Riassumendo, dovrei: + - **Utilizzare manovre di fiancheggiamento** o, nel mio caso, suddividere le funzionalità in base alle funzionalità dell’app in diversi server MCP, in modo da poter distribuire i server in base all’area di utilizzo. In questo modo, è più facile scalare e gestire l’app. Questi server possono anche essere aggiornati indipendentemente l’uno dall’altro. + - **Utilizzare l’infiltrazione** o, nel mio caso, capire cosa stanno facendo questi server, in termini di tool, prompt e risorse. In questo modo posso assicurarmi di interagire con il server giusto e di utilizzare gli strumenti giusti per il lavoro.» + +**Tu**: «Scarabeo del Tempo, ho capito bene?» + +**Scarabeo del Tempo**: «Sì, certo. Le strategie di Scipione possono essere applicate all’architettura della tua applicazione. Se vuoi, posso spiegarti le specifiche del Model Context Protocol (MCP) e come implementarlo nella tua applicazione.» + +**Tu**: «Sì, grazie!» + +**Scarabeo del Tempo**: «Bene, iniziamo creando un server» + +## Creazione di un server MCP + +**Scarabeo del Tempo**: «Per creare il tuo primo server MCP, hai bisogno di due librerie: `@modelcontextprotocol/sdk` e `zod`. + - la libreria `@modelcontextprotocol/sdk` fornisce i necessari tool per creare e gestire i server MCP; + - `zod` è una libreria di dichiarazione e convalida di schemi TypeScript-first che ti aiuta a definire e convalidare le strutture dati utilizzate nel tuo server MCP. + +```bash +npm install @modelcontextprotocol/sdk zod +``` + +Ecco un semplice esempio di come creare un server MCP utilizzando queste librerie: + +```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" +}); +``` + +Il codice precedente esegue le seguenti operazioni: + - importa le classi e le funzioni necessarie dalla libreria `@modelcontextprotocol/sdk`; + - crea un’istanza del server. La classe `McpServer` viene utilizzata per creare il server e accetta un oggetto con il nome e la versione del server come parametri.» + +**Tu**: «Questo non fa molto, giusto?» + +**Scarabeo del Tempo**: «No, non ancora, ma possiamo aggiungergli risorse e tool. Un tool è qualcosa che può essere utilizzato per eseguire un’attività specifica, mentre una risorsa è qualcosa che può essere utilizzata per fornire dati o funzionalità al tool. Aggiungiamone alcuni qui sotto: + +```typescript +server.tool("add", + { a: z.number(), b: z.number() }, + async ({ a, b }) => ({ + content: [{ type: "text", text: String(a + b) }] + }) + ); +``` + +Nel codice precedente, abbiamo: + - definito uno strumento denominato “add” che accetta due numeri come input e restituisce la loro somma come output; + - descritto i parametri di input e la loro validazione tramite zod. La funzione `z.number()` viene utilizzata per validare i dati di input, assicurando che sia `a` che `b` siano numeri. + - la funzione `async` viene utilizzata per eseguire l’addizione e restituire il risultato in un formato specifico.» + +**Tu**: «Interessante, quindi il tool è come una function che può essere chiamata dal client MCP?» + +**Scarabeo del Tempo**: «Esatto! Il client MCP può chiamare questo tool e passare i parametri richiesti. Aggiungiamo anche una risorsa al server: + +```typescript +server.resource( + "greeting", + new ResourceTemplate("greeting://{name}", { list: undefined }), + async (uri, { name }) => ({ + contents: [{ + uri: uri.href, + text: `Hello, ${name}!` + }] + }) + ); +``` + +In questo codice: + - abbiamo definito una risorsa denominata “greeting” che accetta un nome come input e restituisce un messaggio di saluto; + - abbiamo utilizzato un template di risorsa per definire come chiamare la risorsa `greeting://{name}`. Questo schema viene utilizzato per definire il formato URI della risorsa, che include un placeholder per il nome. + - la funzione `async` viene utilizzata per generare il messaggio di saluto in base al nome fornito.» + +**Tu**: «Quindi, la risorsa è come una fonte di dati: potrebbe essere un database, un file o persino un’API? Se si trattasse di un file, userei un URI `file://` come questo:» + +```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}` + }] + }) + ); +``` + +**Scarabeo del Tempo**: «Sì, esatto! La risorsa può essere qualsiasi cosa fornisca dati o funzionalità al server MCP. È possibile definire risorse per file, database, API o qualsiasi altra origine dati si desideri utilizzare. + +Ora, aggiungiamo un livello di trasporto al server in modo che possa comunicare con i client. + +```typescript +// Start receiving messages on stdin and sending messages on stdout +const transport = new StdioServerTransport(); +await server.connect(transport); +``` + +In questo codice, abbiamo: + - creato un livello di trasporto utilizzando la classe `StdioServerTransport`, che consente al server di comunicare con i client tramite input e output standard e viene eseguito sulla macchina locale. Esistono anche altri trasporti come SSE e streaming HTTP che consentono l’esecuzione in remoto su un server, di cui parleremo più avanti. + - chiamato il metodo `connect` per stabilire la connessione tra il server e il livello di trasporto.» + +**Tu**: «Ok, ora che abbiamo un server, come possiamo eseguirlo e testarlo?» + +## Eseguire e testare il server MCP + +**Tu**: «Scipione, hai mai testato le tue tattiche?» + +**Scipione**: «Certo! Testare è fondamentale in qualsiasi strategia. Dovresti sempre testare le tue tattiche prima di metterle in atto. Ricordo, infatti, una battaglia specifica in cui ho usato una nuova tattica e ha fallito miseramente: la Battaglia della Trebbia. Ho imparato la lezione e non ho mai più commesso quell’errore.» + +**Tu**: «Quindi come faccio a testare il mio server MCP?» + +**Scarabeo del Tempo**: «Puoi testare il tuo server MCP eseguendolo in un terminale eseguendo l’inspector in questo modo: + +```bash +npx @modelcontextprotocol/inspector node build/index.js +``` + +Qui sopra, utilizziamo il pacchetto `@modelcontextprotocol/inspector` per eseguire il server MCP. Forniamo l’argomento `node build/index.js` per specificare il punto di ingresso del server. Questo avvierà il server MCP e consentirà di interagire con esso tramite l’inspector.» + +**Tu:** «E come interagisco con lui?» + +**Scarabeo del Tempo:** «Questo avvia un server web sulla porta 6274. Puoi accedere all’inspector aprendo il tuo browser web e andando su `http://localhost:6274`. L’inspector fornisce un’interfaccia intuitiva per interagire con il tuo server MCP, consentendoti di testare gli strumenti e le risorse che hai definito.» + +![User interface dell’inspector](https://softchris.github.io/mcp-workshop/assets/images/connect-7703c67645f368d51c7b24a5d635d6a0.png) + +### -1- Connettiti al server + +**Scarabeo del Tempo:** «Selezionando “Connect” dovresti vedere la finestra qui sotto: + +![Connessione al server](https://softchris.github.io/mcp-workshop/assets/images/connected-7c3570d5d0a8659e27740d2950031cb3.png) + +Dovrebbe indicare che sei connesso. Ora puoi interagire coi tool o le risorse successive.» + +### -2- Elenca tool e risorse + +**Scarabeo del Tempo:** «Successivamente, vogliamo elencare i tool e le risorse disponibili sul server. Puoi farlo selezionando “List Tool” per vedere quali strumenti sono disponibili: + +![Elenco dei tool](https://softchris.github.io/mcp-workshop/assets/images/tools-listed-630aa49c9d7e4347108419fb83c409f6.png) + +Ora dovresti vedere lo strumento “add” nell’elenco. Puoi anche elencare le risorse selezionando la scheda “Resources”.» + +### -3- Esegui il tool + +**Scarabeo del Tempo:** «Per eseguire lo strumento, seleziona lo strumento “add” dall’elenco. Inserisci i parametri nella finestra di dialogo che appare sul lato destro dello schermo. Ad esempio, puoi inserire `a=5` e `b=10` per sommare questi due numeri. Fai clic su “Run Tool” per eseguire lo strumento. Dovresti vedere il risultato nell’area di output sottostante. Il risultato dovrebbe essere `15`.» + +![Esecuzione del tool](https://softchris.github.io/mcp-workshop/assets/images/ran-tool-271ecd5f84a457462e59789b579ee9d4.png) + +**Scipione:** «Interessante, vorrei poter testare le mie strategie in questo modo. Sembra molto utile.» + +**Tu:** «Esatto, davvero! Capisco che potrebbe essere utile per i test e il debug.» + +## Crea un client + +**Scarabeo del Tempo:** «È anche possibile creare un client che si connette al server MCP e interagisce con esso. Ecco un esempio di come creare un semplice client MCP utilizzando la libreria `@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); +``` + +Nel codice precedente, abbiamo: + - creato un livello di trasporto utilizzando la classe `StdioClientTransport`, che consente al client di comunicare con il server MCP tramite input e output standard. + - avviato una nuova istanza `Client` con un nome e una versione. + - connesso il client al livello di trasporto utilizzando il metodo `connect`.» + +**Tu:** «Lasciami indovinare, c’è molto altro che possiamo fare con il client?» + +**Scarabeo del Tempo:** «Sì, ne parleremo più avanti. Il client MCP può essere utilizzato per interagire con il server, richiamare strumenti e accedere alle risorse.» + +### Elenca e chiama tool e risorse + +**Scarabeo del Tempo:** «In genere, ci sono due scenari da considerare: elencare tool e risorse e chiamarli. Ecco come fare:» + +```typescript +// List prompts +const prompts = await client.listPrompts(); + +// List resources +const resources = await client.listResources(); + +// list tools +const tools = await client.listTools(); +``` + +**Tu:**: «Fantastico, ora so quali sono le capacità del server. Ma come le chiamo?» + +**Scarabeo del Tempo:** «Bene, lasciatemi approfondire un esempio specifico, prima i tool. Quindi si inizia chiedendo quali tool si possiedono, poi si memorizza la risposta e poi si chiama lo strumento desiderato. Ecco un esempio: + +Quindi, quando si elencano i tool, si ottiene una risposta nel seguente formato: + +```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#" + } + } +``` + +il che significa che se hai untool `add`, la tua risposta, che elenca gli strumenti, apparirà così:» + +```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#" + } +} +``` + +**Tu:** «Ok, bene, credo che posso memorizzarlo in una variabile e poi chiamare il tool che voglio?» + +**Scarabeo del Tempo:** «Esatto! Vediamo ora come può essere chiamato un 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 + } +}); +``` + +**Tu:**: «Ok, ha senso. E per quanto riguarda le risorse?» + +**Scarabeo del Tempo:** «Le risorse sono simili, ma è necessario fornire l’URI della risorsa e tutti i parametri richiesti. Ecco un esempio:» + +```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! +``` + +**Tu:** «Lo capisco bene, anche se», stai pensando tra te e te, «scommetto che possiamo migliorare in qualche modo? Scarabeo del Tempo, possiamo migliorare, vero?» + +**Scarabeo del Tempo:** «Sì, ma prima di tutto, rendiamo felice Scipione. Alla nostra prossima tappa dobbiamo fare due chiacchiere con la signorina Lamarr.» + +## Compito - Creazione di un sistema di gestione dell'inventario e dei tool per Scipione + +**Scipione:** «Sai, ho così tante pergamene e rotoli sparsi in giro. Mi servirebbe davvero uno strumento che mi aiuti a organizzarli. Ho anche questo abaco che uso per i calcoli. Puoi aiutarmi a creare uno strumento per gestire il mio inventario? + +Ecco un inventario completo delle mie pergamene: +- pergamena delle tattiche; +- pergamena delle scorte alimentari. + +Oh, ecco una pergamena delle tasse. Le tasse sono una cosa importante, l’Impero vuole la sua parte di tutto ciò che acquisiamo. Hai risolto questo problema nel tuo tempo? Non rispondere, non voglio saperlo. + +L’abaco mi serve per supportare le seguenti operazioni: +- addizione: somma due numeri; +- sottrazione: sottrai un numero da un altro; +- moltiplicazione: moltiplica due numeri; +- divisione: dividi un numero per un altro.» + +## Soluzione + +[Soluzione](/lessons/07-mcp/solution/README.md) + +## Verifica delle conoscenze + +**Domanda:** Quali sono i diversi tipi di risorse che un server MCP può esporre? + +A. Tool ed endpoint web. +B. Tool e risorse. +C. Tool, risorse e prompt. + +**Domanda:** Quali sono alcuni modi per testare il tuo server MCP? + +A. Inspector. +B. Un client MCP personalizzato. +C. Visual Studio Code. +D. cURL. +E. Tutti i precedenti. + +[Soluzione del quiz](/lessons/07-mcp/solution/solution-quiz.md) + +## Summario + +In questo capitolo abbiamo appreso quanto segue: +- il Model Context Protocol (MCP) è un ottimo modo per trasferire funzionalità ai server invece di concentrarle tutte in un unico posto. Questo consente alle app di rimanere compatte e focalizzate. Il vantaggio aggiuntivo è che team diversi possono gestire anche server diversi. Grazie al fatto che MCP è un protocollo, chiunque desideri condividere funzionalità può farlo in un formato comune; +- abbiamo inoltre esaminato come utilizzare un server MCP utilizzando lo strumento inspector o un client scritto. + +## Risorse per lo studio autonomo + +- [Building MCP Servers](https://github.com/microsoft/mcp-for-beginners/tree/main/03-GettingStarted/01-first-server) From d84a882fd31d39abc5f567405782b43670c947cb Mon Sep 17 00:00:00 2001 From: Federico Moretti Date: Sun, 12 Oct 2025 14:43:21 +0200 Subject: [PATCH 22/22] chore: add complete Italian translation --- .../08-mcp-advanced/translations/README.it.md | 251 ++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 lessons/08-mcp-advanced/translations/README.it.md diff --git a/lessons/08-mcp-advanced/translations/README.it.md b/lessons/08-mcp-advanced/translations/README.it.md new file mode 100644 index 00000000..76c4138f --- /dev/null +++ b/lessons/08-mcp-advanced/translations/README.it.md @@ -0,0 +1,251 @@ +# Lezione 8: Miglioramento dei client MCP coi Large Language Model + +Nella lezione precedente, hai creato un server MCP e hai esplorato come aiuta a disaccoppiare la logica di un’applicazione di intelligenza artificiale dalle sue funzionalità. Abbiamo mostrato come aggiungere strumenti e risorse come funzionalità e come il server potesse essere accessibile tramite uno strumento di ispezione o un client personalizzato. Questo era solo l’inizio. In questo capitolo, faremo un ulteriore passo avanti integrando un Large Language Model (LLM) nel client, sbloccando un’esperienza utente più potente e intuitiva. + +In questo capitolo imparerai a: +- potenziare il tuo client con un LLM; +- utilizzare il tuo client migliorato per convertire una risposta del server MCP in un tool; +- sfruttare il tuo client migliorato per creare una user experience più naturale. + +## Configurazione + +Se non l’hai ancora fatto, configura il tuo ambiente di sviluppo. Ecco come puoi fare: [Configura il tuo ambiente](/docs/setup/README.md). + +## Risorse correlate + +[![Guarda un breve video sul MCP](https://img.youtube.com/vi/YRfOiB0Im64/0.jpg)](https://www.youtube.com/watch?v=YRfOiB0Im64) + +_Questo video illustra il Model Context Protocol._ + +*🎥 Clicca sull’immagine qui sopra per guardare un breve video sul MCP* + + +## Storia: “Hedwig ‘Hedy’ Lamarr” + +> [!NOTE] +> _La nostra storia finora. Sei un ingegnere meccanico della Londra del 1860. Stavi lavorando al tuo automa e hai ricevuto una lettera da Charles Babbage che ti ha portato in una biblioteca dove hai trovato un dispositivo per viaggiare nel tempo. Durante i tuoi viaggi nel tempo sei finito in molti luoghi della storia. Ora stai lavorando a stretto contatto con Ada Lovelace, con la sua villa come base operativa, ed è qui che la storia continua._ +> +> Torna alla [Lezione 1](/lessons/translations/01-intro-to-genai/README.it.md) se vuoi ripercorrere la storia dall’inizio e iniziare a usare l’IA generativa. + +> [!NOTE] +> Anche se ti consigliamo di leggere la storia (è divertente!), [clicca qui](##interagisci-con-hedy-lamarr) se preferisci passare direttamente al contenuto tecnico. + +Ancora una volta sei tornato alla villa di Ada. Questa volta Ada ti ha accolto al cancello principale. + +**Ada Lovelace**: «Beh, com’è andata?» + +**Tu**: «Bene, penso che siamo riusciti a far funzionare questa app. Ecco, guarda tu stessa», dici e passi il dispositivo ad Ada. + +**Ada Lovelace**: Prende il dispositivo, lo esamina attentamente e borbotta tra sé e sé: «Mmm hm, ah capisco, sì, sì no, questo non va bene. Manca di una certa finezza.» + +**Tu**: «Ci stavo pensando anch’io, dobbiamo poter digitare o parlare con lui, giusto?» + +**Ada Lovelace**: «Bene, conosco proprio la persona giusta per aiutarci. Anzi, verrò con te questa volta, è passato troppo tempo dall’ultima volta che ci siamo visti. *Scarabeo del Tempo, Hollywood, per favore, 1940, residenza di Hedy Lamarr*.» + +Tutto sfuma nel nero. Un vortice di colori ti attraversa e, pochi istanti dopo, la tua vista inizia a focalizzarsi. Vedi un uomo seduto accanto a un pianoforte, che parla animatamente con una donna dai capelli castano scuro e ricci. Entrambi gesticolano eccitati mentre parlano. + +![Hedy Lamarr](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/08-mcp-advanced/assets/hedy-invention.jpeg) + +La donna si volta verso Ada che era in piedi accanto a te per esclamare «Ada, sei tu, è passato troppo tempo.» + +**Ada Lovelace**: «Carissima Hedwig, suppongo che tu stia lavorando alla tua ultima invenzione?» + +**Hedy Lamarr**: «Sì, in effetti George e io pensiamo di aver scoperto qualcosa di interessante: il “salto di frequenza”, ma probabilmente non dovrei più dirlo, chissà chi sta ascoltando.» + +**Ada Lovelace**: «Oh, intendi lui», indicando te, «è impegnato nella sua avventura.» + +**Hedy Lamarr**: «Capisco, cosa posso fare per te?» + +**Ada Lovelace**: «In realtà, abbiamo bisogno che questo dispositivo funzioni un po’ meglio. Avete qualche idea?» + +**Hedy Lamarr**: Prende il dispositivo e lo osservò da diverse angolazioni. «Dici di aver già separato le funzionalità dalla parte di comunicazione?» + +**Ada Lovelace**: «Sì, sì, l’abbiamo fatto.» + +**Hedy Lamarr**: «Bene, allora renderei la parte relativa alla comunicazione un po’ più intelligente. Questo mi fa pensare a una conversazione che ho avuto con un cadetto della Marina mentre cercavo di vendere titoli di guerra. Credo si chiamasse Minsky. “Che aspetto ha l’intelligenza umana in una macchina?” era l’argomento. Ho la sensazione che un giorno farà qualcosa di grandioso in questo campo. Quindi sì, dategli più intelligenza.» + +**Ada Lovelace**: «Bene, hai sentito la signora Lamarr, mettiti al lavoro.» + +**Tu**: «Scarabeo del Tempo, come possiamo fare?» + +**Scarabeo del Tempo**: «È possibile migliorare il client creato in precedenza integrando un Large Language Model o LLM.» + +> Hedy Lamarr è stata una figura straordinaria, nota sia per la sua fama hollywoodiana che per i suoi straordinari contributi alla tecnologia. +> +> Tuttavia, oltre alla sua carriera di attrice, Lamarr è stata anche una brillante inventrice. Durante la seconda guerra mondiale, inventò insieme al compositore George Antheil un sistema di guida radio per i siluri Alleati. Questo sistema utilizzava la tecnologia a spettro diffuso e a salto di frequenza per impedire alle potenze dell’Asse di interferire con i segnali. Sebbene non fosse utilizzato durante la guerra, questa tecnologia divenne in seguito la base delle moderne comunicazioni wireless, tra cui Wi-Fi, Bluetooth e GPS. +> +> Il contributo di Lamarr alla tecnologia non fu pienamente riconosciuto durante la sua vita, ma oggi è celebrata come una pioniera nel settore. La sua storia è un affascinante mix di glamour e genialità, a dimostrazione che la vera innovazione può nascere dai luoghi più inaspettati. +> Per saperne di più su [Hedy Lamarr](https://en.wikipedia.org/wiki/Hedy_Lamarr) clicca qui e su [Marvin Minsky](https://en.wikipedia.org/wiki/Marvin_Minsky) clicca qui. + +## Interagisci con Hedy Lamarr + +Se vuoi interagire con Hedy, esegui la app [Personaggi](/app/README.md). + +> [!IMPORTANT] +> Questo dialogo è interamente frutto di fantasia: le risposte sono generate dall’intelligenza artificiale. +> [Dichiarazione di responsabilità sull’IA](../../README.md#responsible-ai-disclaimer) + +![Hedy Lamarr](https://raw.githubusercontent.com/microsoft/generative-ai-with-javascript/main/lessons/08-mcp-advanced/assets/hedylamarr.jpeg) + +**Passaggi**: + +1. Avvia un [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript). +2. Passa a _/app_ nella root del repo. +3. Individua la console ed esegui `npm install` seguito da `npm start`. +4. Una volta comparso, seleziona il pulsante “Apri nel Browser”. +5. Chatta con Hedy. + +Per una spiegazione più dettagliata della app, vedi [Interagisci con Dinocrate](/lessons/01-intro-to-genai/translations/README.it.md#interagisci-con-dinocrate). + +> [!NOTE] +> Se stai eseguendo il progetto in locale sul tuo computer, consulta la guida QuickStart per ottenere la configurazione di un token per l’[accesso personale a GitHub](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) e sostituisci la chiave nel codice. + +## Aggiungere un Large Language Model a un client + +**Scarabeo del Tempo**: «Come dicevo, parliamo di come creare un client che utilizzi un Large Language Model (LLM) per interagire con il server MCP. I vantaggi sono una migliore esperienza utente e la possibilità di utilizzare il linguaggio naturale per interagire con il server. + +Ecco come funzionerebbe ad alto livello: + 1. Il client interagisce con il server MCP per richiedere informazioni sui tool e le risorse disponibili. + 2. Al momento del prompt, l’utente scrive un prompt in linguaggio naturale, che viene poi inviato all’LLM nel client. + 3. Il client determina quale tool o quale risorsa chiamare in base al prompt e agli strumenti e alle risorse disponibili. + +Sembra fattibile, vero?» + +**Tu**: «Sì, è vero! Ma come si fa?» + +**Scarabeo del Tempo**: «Miglioriamo il client creato in precedenza, descrivendo le modifiche al codice in passaggi: + +1. Effettuare una chiamata al server per richiedere tool e risorse disponibili. +2. Convertire la risposta di tool e risorse in uno schema di tool utilizzabile dall’LLM. +3. Istanziare il client OpenAI. +4. Effettuare una chiamata di completamento della chat a OpenAI, passando lo schema degli strumenti come parametro. +5. Determinare quale strumento chiamare in base alla risposta di OpenAI. +6. Chiamare lo strumento sul server utilizzando il client MCP. +7. Rispondere all’utente con il risultato. + +Ecco tutti i passaggi nel codice: + +```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 +``` + +Nel codice precedente (concentrandoci sulle nostre aggiunte): + - abbiamo creato una function `toToolSchema` che converte la risposta di tool e risorse in uno schema utilizzabile dall’LLM; + - abbiamo chiesto al server i tool e le risorse disponibili; + - abbiamo convertito la risposta di tool e risorse in uno schema utilizzabile dall’LLM; + - abbiamo effettuato una chiamata di completion della chat alla nostra IA, passando i tool convertiti come parametro; + - abbiamo capito quale tool chiamare in base alla risposta di OpenAI; + - abbiamo chiamato il tool sul server utilizzando il client MCP; + - abbiamo restituito il risultato all’utente.» + +**Tu**: «Mi piace, è molto meglio! Posso usare il linguaggio naturale senza nemmeno sapere quali tool e risorse sono disponibili. Posso semplicemente chiedere all’IA di farlo per me.» + +**Scarabeo del Tempo**: «Sono contento che ti piaccia. Va detto, però, che potresti voler decidere se mostrare solo una risposta degli strumenti o anche una risposta generica dall’LLM. Quindi, il tuo utente potrebbe trarre vantaggio dalla seguente strategia di risposta: + - **solo tool** se la risposta dell’LLM è uno strumento, chiama lo strumento e restituisci il risultato. + - **solo LLM** se la risposta dell’LLM non è uno strumento, restituisci la risposta dell’LLM “così com’è”. + - **tool e LLM** se la risposta dell’LLM è uno strumento, chiama lo strumento ed effettua un’ulteriore chiamata all’LLM per ottenere la risposta generale. Restituisci sia il risultato dello strumento che la risposta dell’LLM.» + +**Tu**: «Capisco. Qualcosa su cui riflettere. Ma è fantastico! Capisco quanto possa essere utile.» + +## Assignment + +**Ada Lovelace**: «Sembra che tu abbia apportato un notevole miglioramento. Per renderlo davvero utile, ho bisogno che tu crei un server e un client con le seguenti specifiche: + - il server dovrebbe fornire i seguenti strumenti: + - `characterDetails` con l’argomento `name`; + - `place` con l’argomento `name`. + - il client dovrebbe utilizzare un LLM.» + +> [!TIP] +> Ad esempio, puoi dare al server la possibilità di recuperare informazioni da un’API web esterna, come Wikipedia: +> `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(name)}` + +## Soluzione + +[Soluzione](/lessons/08-mcp-advanced/solution/README.md) + +## Verifica delle conoscenze + +**Domanda:** Qual è il vantaggio di aggiungere un LLM al client? + +A. È più facile da gestire. +B. Crea una conversazione più naturale tra l’utente e il server. +C. È meglio avere l’LLM sul server. + +[Soluzione del quiz](/lessons/08-mcp-advanced/solution/solution-quiz.md) + +## Summario + +In questo capitolo hai imparato quanto segue: +- I client potenziati con un LLM offrono un’esperienza utente migliore. +- Le risposte da un server devono essere convertite in un formato che l’LLM possa comprendere come strumento. + +## Risorse per lo studio autonomo + +- [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)