fix(docs): prevent stage-1 appendix link 404s

This commit is contained in:
sanbuphy
2026-05-20 11:23:42 +08:00
parent fea9ccd383
commit d962359412
24 changed files with 64 additions and 64 deletions
@@ -305,7 +305,7 @@ const relatedArticles =
بالإضافة إلى ذلك، يمكننا أيضًا طلب من LLM مساعدتنا في توليد prompt على مستوى المشروع مباشرة. في القسم السابق، كتبنا بأنفسنا فقط prompt لعبة الثعبان. الآن دعنا نحاول جعل النموذج اللغوي الكبير يولد prompt مع إطار كامل ومسار تنفيذ (يمكنك استخدام z.ai مباشرة للتوليد).
إذا كنت تريد تعلم كيفية كتابة prompts أفضل، يمكنك الاطلاع على [ملحق هندسة Prompts](/ar-sa/appendix/8-artificial-intelligence/prompt-engineering).
إذا كنت تريد تعلم كيفية كتابة prompts أفضل، يمكنك الاطلاع على [ملحق هندسة Prompts](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
> أريد أن يجعل الذكاء الاصطناعي يولد لعبة ثعبان على الويب، أحتاج إلى prompt أكثر اكتمالاً لجعل النتيجة أكثر إثارة وإمتاعًا. يرجى توليد prompt المناسب. الهدف الحالي: إنشاء لعبة ثعبان يجب أن تطبق وظيفة أكل كلمات مختلفة لتوليد الشعر، ويجب أن تتضمن وحدة إنشاء الصور.
@@ -646,7 +646,7 @@ HTML و CSS و JavaScript المذكورة سابقًا هي "الثلاثي ا
> "اصنع صفحة لوحة متصدرين باستخدام React، عرض قائمة النقاط على الجانب الأيمن، عند النقر على صف يظهر تفاصيل اللاعب في الأسفل، بأسلوب بسيط وعصري."
إذا كنت تريد فهمًا أعمق لمفاهيم الواجهة الأمامية الأساسية مثل HTML و CSS و JavaScript، يمكنك الاطلاع على [ملحق أساسيات الويب](/ar-sa/appendix/3-browser-and-frontend/javascript-deep-dive). لمعرفة تاريخ تطوير تقنيات الواجهة الأمامية، يمكنك الاطلاع على [ملحق تاريخ تطور الواجهة الأمامية](/ar-sa/appendix/3-browser-and-frontend/frontend-frameworks).
إذا كنت تريد فهمًا أعمق لمفاهيم الواجهة الأمامية الأساسية مثل HTML و CSS و JavaScript، يمكنك الاطلاع على [ملحق أساسيات الويب](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). لمعرفة تاريخ تطوير تقنيات الواجهة الأمامية، يمكنك الاطلاع على [ملحق تاريخ تطور الواجهة الأمامية](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
<a id="appendix-2"></a>
@@ -343,7 +343,7 @@ const relatedArticles =
#### 2.2.1 التحضير: فهم العمليات الأساسية لـ AI IDE
إذا لم تكن معتادًا بعد على الاستخدام الأساسي لـ AI IDE (مثل Cursor و Trae و Windsurf)، نوصي بأولًا قراءة [البرنامج التعليمي الأساسي لـ IDE](/ar-sa/appendix/2-development-tools/ide-basics/) في الملحق، لمعرفة كيفية:
إذا لم تكن معتادًا بعد على الاستخدام الأساسي لـ AI IDE (مثل Cursor و Trae و Windsurf)، نوصي بأولًا قراءة [البرنامج التعليمي الأساسي لـ IDE](/zh-cn/appendix/2-development-tools/ide-basics/) في الملحق، لمعرفة كيفية:
- إنشاء مشروع جديد
- التحدث مع AI Agent
- فهم عملية توليد الكود من قبل AI
@@ -305,7 +305,7 @@ Mit dem Wachsen der Schlange generiert das LLM ein fortlaufendes Geschichtsgedic
Darüber hinaus können wir das LLM bitten, projektweite Prompts für uns zu generieren. Im vorherigen Abschnitt haben wir nur selbst den Prompt für das Snake-Spiel geschrieben. Lass uns jetzt versuchen, das Modell einen Prompt mit einem Gesamtframework und Implementierungspfad generieren zu lassen (du kannst das direkt mit z.ai machen).
Wenn du lernen möchtest, bessere Prompts zu schreiben, siehe das [Prompt-Engineering-Appendix](/de-de/appendix/8-artificial-intelligence/prompt-engineering).
Wenn du lernen möchtest, bessere Prompts zu schreiben, siehe das [Prompt-Engineering-Appendix](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering).
> Ich möchte, dass AI ein Web-Snake-Spiel generiert. Ich brauche einen umfassenderen Prompt, damit das Ergebnis beeindruckender und interessanter wird. Bitte generiere einen entsprechenden Prompt. Das aktuelle Ziel ist: ein Snake-Spiel zu generieren, das die Funktion des Fressens verschiedener Wörter zur Gedichtgenerierung implementieren soll und ein Bildgenerierungsmodul enthalten sollte.
@@ -644,7 +644,7 @@ Nach dem Verständnis von Frontend-Konzepten kannst du Anforderungen so an AI be
> „Erstelle mit React eine Bestenliste-Seite: rechts die Punkteliste, bei Klick auf eine Zeile werden unten die Spielerdetails angezeigt, im minimalistischen modernen Stil."
Wenn du HTML, CSS, JavaScript und andere Frontend-Grundlagen vertiefen möchtest, siehe das [Web-Basics-Appendix](/de-de/appendix/3-browser-and-frontend/javascript-deep-dive). Für die Entwicklungsgeschichte der Frontend-Technologie siehe das [Frontend-Evolutionsgeschichte-Appendix](/de-de/appendix/3-browser-and-frontend/frontend-frameworks).
Wenn du HTML, CSS, JavaScript und andere Frontend-Grundlagen vertiefen möchtest, siehe das [Web-Basics-Appendix](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive). Für die Entwicklungsgeschichte der Frontend-Technologie siehe das [Frontend-Evolutionsgeschichte-Appendix](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks).
## <span id="appendix-2">[Anhang 2: Was genau ist Vibe Coding](#appendix-nav)</span>
@@ -360,7 +360,7 @@ Sie können diesen Prompt nach kleinen Anpassungen an AI IDE senden, um Code zu
#### 2.2.1 Vorbereitung: Grundlegende Bedienung von AI IDE verstehen
Wenn Sie mit AI IDE (wie Cursor, Trae, Windsurf etc.) noch nicht vertraut sind, empfehlen wir, zunächst das [IDE-Grundlagen-Tutorial](/de-de/appendix/2-development-tools/ide-basics/) im Anhang zu lesen, um zu erfahren:
Wenn Sie mit AI IDE (wie Cursor, Trae, Windsurf etc.) noch nicht vertraut sind, empfehlen wir, zunächst das [IDE-Grundlagen-Tutorial](/zh-cn/appendix/2-development-tools/ide-basics/) im Anhang zu lesen, um zu erfahren:
- Wie man ein neues Projekt erstellt
- Wie man mit dem AI Agent kommuniziert
- Wie man den Code-Generierungsprozess der AI versteht
@@ -58,7 +58,7 @@ Konkret müssen Sie folgende Kernelemente beherrschen:
6. **Fehlerbehandlung**: Wissen, wie man Probleme diagnostiziert, wenn etwas schiefgeht (falscher API Key, zu häufige Anfragen etc.)
::: info Was ist eine API?
Eine ausführlichere Erklärung finden Sie im Anhang: [API-Einführung](/de-de/appendix/4-server-and-backend/api-intro).
Eine ausführlichere Erklärung finden Sie im Anhang: [API-Einführung](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning API-Sicherheitshinweise
API Key ist Ihr "Ausweis" für AI-Dienst-Anfragen &ndash; eine Passwort-Zeichenkette zur Authentifizierung und Abrechnung.
@@ -93,7 +93,7 @@ Mit diesem Verständnis werden Sie feststellen: Ob Text- oder Bildmodell &ndash;
In "1.2 Prototyp erstellen" haben Sie bereits einen interaktiven Prototypen erstellt. Als Nächstes verwandeln wir die "AI-ähnlichen Funktionen" im Prototyp in echte Fähigkeiten: **Wenn der Nutzer auf den Button klickt, sendet der Prototyp eine Anfrage an einen externen AI-Dienst und zeigt den zurückgegebenen Text an.**
::: info Prinzip-Erweiterung
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Große Sprachmodelle (LLM) Einführung](/de-de/appendix/8-artificial-intelligence/llm-principles).
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Große Sprachmodelle (LLM) Einführung](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Mehr erfahren: Was ist DeepSeek?
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, unter dem Handelsnamen DeepSeek, ist ein **chinesisches AI-Unternehmen, das große Sprachmodelle (LLMs) entwickelt**. DeepSeek hat seinen Hauptsitz in Hangzhou, Provinz Zhejiang, und wird von dem chinesischen Hedgefonds High-Flyer besessen und finanziert. DeepSeek wurde im Juli 2023 von Liang Wenfeng, Mitbegründer von High-Flyer, gegründet, der auch CEO beider Unternehmen ist. Das Unternehmen brachte im Januar 2025 den gleichnamigen Chatbot und das DeepSeek-R1-Modell auf den Markt.
@@ -220,7 +220,7 @@ Weitere Informationen finden Sie in der [MiniMax OpenAI-kompatiblen Schnittstell
# 3. Bild-zu-Text-API integrieren: Qwen3 VL
::: info Prinzip-Erweiterung
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Visuelle Sprachmodelle (VLM) Einführung](/de-de/appendix/8-artificial-intelligence/multimodal-models).
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Visuelle Sprachmodelle (VLM) Einführung](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Mehr erfahren: Was ist Qwen3 VL?
@@ -371,7 +371,7 @@ Schließlich erhalten wir das Generierungsergebnis:
In den vorherigen Abschnitten haben wir hauptsächlich mit textbezogenen Aufgaben gearbeitet. Als Nächstes werden wir die Integration der Bildgenerierungsfunktion ausprobieren, die die Generierung von Bildern aus Textbeschreibungen oder die Bearbeitung von Bildern unterstützt.
::: info Prinzip-Erweiterung
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Bildgenerierung Einführung](/de-de/appendix/8-artificial-intelligence/image-generation).
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Bildgenerierung Einführung](/zh-cn/appendix/8-artificial-intelligence/image-generation).
::: details Mehr erfahren: Was ist [Seedream](https://seed.bytedance.com/en/seedream4_5)?
@@ -58,7 +58,7 @@ Specifically, you need to master the following core elements:
6. **Error Handling**: Knowing how to troubleshoot when problems occur (such as incorrect API Key, too many requests, etc.)
::: info ️ What is an API
For a more in-depth explanation of APIs, see the appendix: [Introduction to APIs](/en/appendix/4-server-and-backend/api-intro).
For a more in-depth explanation of APIs, see the appendix: [Introduction to APIs](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning 🔐 **API Security Notes**
The API Key is your "pass" for requesting AI services — it's a secret string used for authentication and billing.
@@ -93,7 +93,7 @@ Once you've grasped these concepts, you'll find that whether you're integrating
In `1.2 Building Your Prototype`, you already created an interactive prototype. What we need to do next is turn the "AI-like features" in the prototype into real, working capabilities: **when the user clicks a button, the prototype sends a request to an external AI service and displays the returned text.**
::: info ️ Further Reading on Principles
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Large Language Models (LLM)](/en/appendix/8-artificial-intelligence/llm-principles).
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Large Language Models (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Learn More: What is DeepSeek?
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, operating under the brand name DeepSeek, is a **Chinese artificial intelligence (AI) company that develops large language models (LLMs)**. DeepSeek is headquartered in Hangzhou, Zhejiang, and is owned and funded by the Chinese hedge fund High-Flyer. DeepSeek was founded in July 2023 by Liang Wenfeng, co-founder of High-Flyer, who also serves as CEO of both companies. The company launched its eponymous chatbot and its DeepSeek-R1 model in January 2025.
@@ -219,7 +219,7 @@ For more details, refer to the [MiniMax OpenAI Compatible API Documentation](htt
# 3. Integrating the Image-to-Text API: Qwen3 VL
::: info ️ Further Reading on Principles
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Vision Language Models (VLM)](/en/appendix/8-artificial-intelligence/multimodal-models).
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Vision Language Models (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Learn More: What is Qwen3 VL?
@@ -369,7 +369,7 @@ Final generated result:
In the previous section, we mainly handled text-related tasks. Next, we will try integrating image generation capabilities to support generating images from text descriptions, or editing images.
::: info ️ Further Reading on Principles
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Image Generation](/en/appendix/8-artificial-intelligence/image-generation).
If you want to learn more about the underlying principles, check out the appendix: [Introduction to Image Generation](/zh-cn/appendix/8-artificial-intelligence/image-generation).
::: details Learn More: What is [Seedream](https://seed.bytedance.com/en/seedream4_5)?
@@ -344,7 +344,7 @@ Puedes modificar ligeramente este prompt y luego enviarlo al AI IDE para generar
#### 2.2.1 Preparacion: conocer las operaciones basicas del AI IDE
Si aun no estas familiarizado con el uso basico del AI IDE (como Cursor, Trae, Windsurf, etc.), te recomendamos primero ver el [tutorial basico de IDE](/es-es/appendix/2-development-tools/ide-basics/) en el apendice, para entender como:
Si aun no estas familiarizado con el uso basico del AI IDE (como Cursor, Trae, Windsurf, etc.), te recomendamos primero ver el [tutorial basico de IDE](/zh-cn/appendix/2-development-tools/ide-basics/) en el apendice, para entender como:
- Crear un nuevo proyecto
- Conversar con el AI Agent
- Entender el proceso de generacion de codigo de la IA
@@ -58,7 +58,7 @@ En concreto, necesitas dominar estos elementos centrales:
6. **Manejo de errores**: saber diagnosticar y resolver problemas como API Key incorrecta o demasiadas solicitudes.
::: info ️ Que es una API
Para una explicacion mas profunda de API, consulta el apendice: [Introduccion a API](/es-es/appendix/4-server-and-backend/api-intro).
Para una explicacion mas profunda de API, consulta el apendice: [Introduccion a API](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning 🔐 **Notas de seguridad sobre API**
La API Key es tu "pase de acceso" para solicitar servicios de IA. Es una cadena secreta usada para autenticacion y facturacion.
@@ -93,7 +93,7 @@ Cuando entiendas estos conceptos, veras que conectar un modelo de texto o un mod
En `1.2 Crear un prototipo con tus manos`, ya construiste un prototipo interactivo. Ahora vamos a convertir las funciones que "parecen IA" en capacidades realmente utilizables: **cuando el usuario haga clic en un boton, el prototipo enviara una solicitud a un servicio externo de IA y mostrara el texto devuelto.**
::: info ️ Ampliacion conceptual
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos de lenguaje grandes (LLM)](/es-es/appendix/8-artificial-intelligence/llm-principles).
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos de lenguaje grandes (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Saber mas: que es DeepSeek
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, que opera bajo la marca DeepSeek, es una **empresa china de inteligencia artificial dedicada al desarrollo de modelos de lenguaje grandes (LLMs)**. DeepSeek tiene sede en Hangzhou, Zhejiang, y pertenece al fondo cuantitativo chino High-Flyer, que tambien la financia. Fue fundada en julio de 2023 por Liang Wenfeng, cofundador de High-Flyer, quien tambien es CEO de ambas companias. En enero de 2025 lanzo su chatbot homonimo y el modelo DeepSeek-R1.
@@ -219,7 +219,7 @@ Para mas informacion, consulta la [documentacion de la interfaz compatible con O
# 3. Conectar una API de imagen a texto: Qwen3 VL
::: info ️ Ampliacion conceptual
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos vision-lenguaje (VLM)](/es-es/appendix/8-artificial-intelligence/multimodal-models).
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a los modelos vision-lenguaje (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Saber mas: que es Qwen3 VL
@@ -369,7 +369,7 @@ Finalmente se obtiene el resultado generado:
En las secciones anteriores trabajamos principalmente con tareas relacionadas con texto. Ahora intentaremos conectar capacidades de generacion de imagenes, para soportar generar imagenes desde descripciones de texto o modificar imagenes existentes.
::: info ️ Ampliacion conceptual
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a la generacion de imagenes](/es-es/appendix/8-artificial-intelligence/image-generation).
Si quieres conocer mas sobre los principios, consulta el apendice: [Introduccion a la generacion de imagenes](/zh-cn/appendix/8-artificial-intelligence/image-generation).
::: details Saber mas: que es [Seedream](https://seed.bytedance.com/en/seedream4_5)
@@ -68,7 +68,7 @@ Por eso necesitas un IDE (Integrated Development Environment, entorno de desarro
## 2. Que es un IDE y por que lo necesitas
::: info Lectura previa
Si todavia no sabes que es un IDE o para que sirve cada elemento de su interfaz, te recomendamos leer primero [Introduccion a IDE](/es-es/appendix/2-development-tools/ide-basics) para conocer los conceptos basicos y funciones habituales.
Si todavia no sabes que es un IDE o para que sirve cada elemento de su interfaz, te recomendamos leer primero [Introduccion a IDE](/zh-cn/appendix/2-development-tools/ide-basics) para conocer los conceptos basicos y funciones habituales.
:::
En los primeros tiempos de la programacion, bastaban un editor de texto simple y un procesador del lenguaje. Pero al aumentar la complejidad de los proyectos, los desarrolladores necesitaron con urgencia una herramienta que gestionara archivos de forma eficiente, soportara resaltado de sintaxis y permitiera depurar. Asi nacio el entorno de desarrollo integrado, o IDE.
@@ -103,7 +103,7 @@ Incluso puede usarse para editar documentos Markdown.
En resumen, un IDE es un conjunto de herramientas que ayuda a los desarrolladores a escribir codigo y ejecutar programas con eficiencia.
Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/es-es/appendix/2-development-tools/ide-basics).
Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/zh-cn/appendix/2-development-tools/ide-basics).
## 3. En que se diferencia un AI IDE de un IDE normal
@@ -507,7 +507,7 @@ La funcion concreta de cada parte es:
- **Panel (panel inferior)**: contiene terminal y ventanas de salida.
- **Status Bar (barra de estado)**: muestra el estado del entorno actual.
Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/es-es/appendix/2-development-tools/ide-basics).
Para una explicacion mas detallada, consulta [la seccion del apendice sobre el principio visual de un IDE](/zh-cn/appendix/2-development-tools/ide-basics).
<div style="margin: 50px 0;">
<ClientOnly>
@@ -772,7 +772,7 @@ En el proximo capitulo cambiaremos el foco de "saber usar herramientas" a "hacer
<span style="font-size: 12px; color: #909399">Cuando veas un termino informatico que no entiendes, consultalo aqui. Conviene leerlo una vez completo.</span>
</el-col>
<el-col :span="12">
<a href="/es-es/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Apendice 2: explicacion de la barra de menus de Visual Studio Code</b></a><br/>
<a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Apendice 2: explicacion de la barra de menus de Visual Studio Code</b></a><br/>
<span style="font-size: 12px; color: #909399">Si no sabes para que sirve una parte del AI IDE, usa este contenido para preguntar a la IA o consultalo directamente.</span>
</el-col>
</el-row>
@@ -344,7 +344,7 @@ Vous pouvez modifier légèrement ce prompt avant de l'envoyer à l'IDE AI pour
#### 2.2.1 Préparation : comprendre les opérations de base de l'IDE AI
Si vous n'êtes pas encore familier avec l'utilisation basique de l'IDE AI (comme Cursor, Trae, Windsurf, etc.), il est recommandé de consulter d'abord le [tutoriel de base sur l'IDE](/fr-fr/appendix/2-development-tools/ide-basics/) en annexe, pour apprendre comment :
Si vous n'êtes pas encore familier avec l'utilisation basique de l'IDE AI (comme Cursor, Trae, Windsurf, etc.), il est recommandé de consulter d'abord le [tutoriel de base sur l'IDE](/zh-cn/appendix/2-development-tools/ide-basics/) en annexe, pour apprendre comment :
- Créer un nouveau projet
- Dialoguer avec l'AI Agent
- Comprendre le processus de génération de code de l'IA
@@ -58,7 +58,7 @@ Concrètement, vous devez maîtriser les éléments clés suivants :
6. **Gestion des erreurs** : savoir comment diagnostiquer et résoudre les problèmes (API Key incorrecte, requêtes trop fréquentes, etc.)
::: info ️ Qu'est-ce qu'une API
Pour une explication plus approfondie des API, consultez l'annexe : [Introduction aux API](/fr-fr/appendix/4-server-and-backend/api-intro).
Pour une explication plus approfondie des API, consultez l'annexe : [Introduction aux API](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning 🔐 **Consignes de sécurité des API**
L'API Key est votre « passe » pour accéder aux services IA. C'est une chaîne de caractères de type mot de passe, utilisée pour l'authentification et la facturation.
@@ -93,7 +93,7 @@ Une fois ces concepts maîtrisés, vous découvrirez que le processus est le mê
Dans la section 1.2, vous avez déjà créé un prototype interactif. Ce que nous allons faire maintenant, c'est transformer les « fonctionnalités qui ressemblent à de l'IA » en véritables capacités : <strong>quand l'utilisateur clique sur un bouton, le prototype envoie une requête à un service IA externe et affiche le texte renvoyé.</strong>
::: info ️ Pour aller plus loin sur les principes
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux grands modèles de langage (LLM)](/fr-fr/appendix/8-artificial-intelligence/llm-principles).
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux grands modèles de langage (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Pour en savoir plus : Qu'est-ce que DeepSeek ?
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, commercialisée sous le nom de DeepSeek, est une <strong>entreprise chinoise d'intelligence artificielle (IA) qui développe des grands modèles de langage (LLM)</strong>. DeepSeek est basée à Hangzhou, dans la province du Zhejiang, et est détenue et financée par le fonds quantitatif chinois High-Flyer. DeepSeek a été fondée en juillet 2023 par Liang Wenfeng, cofondateur de High-Flyer, qui est également PDG des deux entreprises. L'entreprise a lancé son chatbot éponyme et son modèle DeepSeek-R1 en janvier 2025.
@@ -219,7 +219,7 @@ Pour plus d'informations, consultez la [documentation de l'interface compatible
# 3. Intégrer l'API de conversion image-texte : Qwen3 VL
::: info ️ Pour aller plus loin sur les principes
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux modèles de langage visuel (VLM)](/fr-fr/appendix/8-artificial-intelligence/multimodal-models).
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction aux modèles de langage visuel (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Pour en savoir plus : Qu'est-ce que Qwen3 VL ?
@@ -369,7 +369,7 @@ Résultat final :
Dans les parties précédentes, nous avons principalement traité des tâches liées au texte. Nous allons maintenant essayer d'intégrer la génération d'images, en prenant en charge la génération d'images à partir de descriptions textuelles ou la modification d'images.
::: info ️ Pour aller plus loin sur les principes
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction à la génération d'images](/fr-fr/appendix/8-artificial-intelligence/image-generation).
Si vous voulez en savoir plus sur les principes, consultez l'annexe : [Introduction à la génération d'images](/zh-cn/appendix/8-artificial-intelligence/image-generation).
::: details Pour en savoir plus : Qu'est-ce que [Seedream Jimeng](https://seed.bytedance.com/en/seedream4_5) ?
@@ -68,7 +68,7 @@ C'est pourquoi vous avez besoin d'un IDE (Environnement de Développement Intég
## 2. Qu'est-ce qu'un IDE, pourquoi en a-t-on besoin
::: info Conseil de préparation
Si vous n'êtes pas encore familier avec ce qu'est un IDE et à quoi servent les différents éléments de l'interface, il est recommandé de lire d'abord [Introduction à l'IDE](/fr-fr/appendix/2-development-tools/ide-basics) pour comprendre les concepts de base et les fonctionnalités courantes des IDE.
Si vous n'êtes pas encore familier avec ce qu'est un IDE et à quoi servent les différents éléments de l'interface, il est recommandé de lire d'abord [Introduction à l'IDE](/zh-cn/appendix/2-development-tools/ide-basics) pour comprendre les concepts de base et les fonctionnalités courantes des IDE.
:::
À l'époque des premiers pas de la programmation, nous n'avions besoin que de simples éditeurs de texte et de processeurs de langage. Mais avec l'augmentation de la complexité des projets, les développeurs avaient un besoin urgent d'un outil capable de gérer efficacement les fichiers, de supporter la coloration syntaxique et le débogage. C'est ainsi que l'IDE (Environnement de Développement Intégré) est né.
@@ -103,7 +103,7 @@ On peut même l'utiliser pour éditer des documents Markdown.
En résumé, un IDE est un ensemble d'outils qui aide les développeurs à écrire du code et à exécuter des programmes plus efficacement.
Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/fr-fr/appendix/2-development-tools/ide-basics).
Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/zh-cn/appendix/2-development-tools/ide-basics).
## 3. Quelle est la différence entre un AI IDE et un IDE classique
@@ -506,7 +506,7 @@ Voici le rôle de chaque section :
- **Panel (Panneau inférieur)** : contient le terminal et la fenêtre de sortie.
- **Status Bar (Barre d'état)** : affiche l'état actuel de l'environnement.
Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/fr-fr/appendix/2-development-tools/ide-basics).
Pour plus de détails, consultez [l'annexe sur les principes de l'IDE virtuel](/zh-cn/appendix/2-development-tools/ide-basics).
<div style="margin: 50px 0;">
<ClientOnly>
@@ -767,7 +767,7 @@ Le chapitre suivant va déplacer le focus de « savoir utiliser les outils » ve
<span style="font-size: 12px; color: #909399">Quand vous rencontrez un terme informatique que vous ne comprenez pas, venez ici pour trouver rapidement sa signification. Il est recommandé de le lire une fois en entier.</span>
</el-col>
<el-col :span="12">
<a href="/fr-fr/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Explication de la barre de menus de Visual Studio Code</b></a><br/>
<a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Annexe 2 : Explication de la barre de menus de Visual Studio Code</b></a><br/>
<span style="font-size: 12px; color: #909399">Quand vous ne savez pas à quoi sert un élément de l'interface de l'AI IDE, utilisez le contenu ci-dessous pour dialoguer avec l'IA, ou consultez-le directement.</span>
</el-col>
</el-row>
@@ -343,7 +343,7 @@ AI は構造化されたニーズと対応するプロンプトを返してく
#### 2.2.1 準備:AI IDE の基本操作を理解する
もし AI IDECursor、Trae、Windsurf など)の基本使い方にまだ慣れていない場合、まず付録の[IDE 基礎チュートリアル](/ja-jp/appendix/2-development-tools/ide-basics/)を参照して、以下を理解することをお勧めします:
もし AI IDECursor、Trae、Windsurf など)の基本使い方にまだ慣れていない場合、まず付録の[IDE 基礎チュートリアル](/zh-cn/appendix/2-development-tools/ide-basics/)を参照して、以下を理解することをお勧めします:
- 新規プロジェクトの作成
- AI Agent との対話
- AI のコード生成プロセスの理解
@@ -304,7 +304,7 @@ z.ai 외에도 아래의 훌륭한 AI 프로그래밍 플랫폼을 시도해 볼
또한 LLM에게 프로젝트 수준의 프롬프트를 직접 생성해 달라고 요청할 수도 있습니다. 지난 절에서는 스네이크 게임의 프롬프트만 우리가 직접 작성했습니다. 이제 대형 모델에게 전체 프레임워크와 구현 경로가 포함된 프롬프트를 생성하게 해 봅시다. z.ai로 바로 생성할 수 있습니다.
더 좋은 프롬프트를 작성하는 법을 배우고 싶다면 [프롬프트 엔지니어링 부록](/ko-kr/appendix/8-artificial-intelligence/prompt-engineering)을 확인하세요.
더 좋은 프롬프트를 작성하는 법을 배우고 싶다면 [프롬프트 엔지니어링 부록](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering)을 확인하세요.
> AI가 웹 스네이크 게임을 생성하게 하고 싶습니다. 더 완성도 높은 프롬프트가 필요합니다. 생성 결과가 더 인상적이고 재미있어야 합니다. 이에 맞는 프롬프트를 생성해 주세요. 현재 목표는 다음과 같습니다. 서로 다른 단어를 먹으면 시를 생성하는 기능이 있는 스네이크 게임을 만들고, 이미지 생성 모듈도 포함해야 합니다.
@@ -643,7 +643,7 @@ AI 보조 프로그래밍 시대에는 프레임워크의 모든 세부 사항
> "React로 순위표 페이지를 만들어줘. 오른쪽에는 점수 목록을 표시하고, 어떤 행을 클릭하면 아래에 플레이어 상세 정보를 보여 줘. 스타일은 간결하고 모던하게 해줘."
HTML, CSS, JavaScript 같은 프론트엔드 기초 지식을 더 깊이 이해하고 싶다면 [Web 기초 부록](/ko-kr/appendix/3-browser-and-frontend/javascript-deep-dive)을 확인하세요. 프론트엔드 기술의 발전 역사를 알고 싶다면 [프론트엔드 진화사 부록](/ko-kr/appendix/3-browser-and-frontend/frontend-frameworks)을 확인하세요.
HTML, CSS, JavaScript 같은 프론트엔드 기초 지식을 더 깊이 이해하고 싶다면 [Web 기초 부록](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive)을 확인하세요. 프론트엔드 기술의 발전 역사를 알고 싶다면 [프론트엔드 진화사 부록](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks)을 확인하세요.
## <span id="appendix-2">[부록 2: Vibe Coding은 대체 무엇인가](#appendix-nav)</span>
@@ -346,7 +346,7 @@ AI는 구조화된 요구사항과 대응되는 프롬프트를 반환할 것입
#### 2.2.1 준비 작업: AI IDE의 기본 조작 이해하기
AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하지 않다면, 부록의 [IDE 기초 튜토리얼](/ko-kr/appendix/2-development-tools/ide-basics/)을 먼저 보고 다음을 이해하는 것이 좋습니다.
AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하지 않다면, 부록의 [IDE 기초 튜토리얼](/zh-cn/appendix/2-development-tools/ide-basics/)을 먼저 보고 다음을 이해하는 것이 좋습니다.
- 새 프로젝트 만들기
- AI Agent와 대화하기
- AI의 코드 생성 과정 이해하기
@@ -58,7 +58,7 @@ API는 컴퓨터 분야의 중요한 추상 개념입니다. 간단히 이해하
6. **오류 처리**: 문제가 생겼을 때(API Key 오류, 요청 빈도 초과 등) 원인을 찾아 해결하는 방법을 아는 것입니다.
::: info ️ API란 무엇인가
API에 대한 더 깊은 설명은 부록 [API 입문](/ko-kr/appendix/4-server-and-backend/api-intro)을 참고하세요.
API에 대한 더 깊은 설명은 부록 [API 입문](/zh-cn/appendix/4-server-and-backend/api-intro)을 참고하세요.
::: warning 🔐 **API 보안 주의사항**
API Key는 AI 서비스 요청을 위한 “통행증”입니다. 신원 확인과 과금에 쓰이는 비밀번호 문자열입니다.
@@ -93,7 +93,7 @@ API에는 이런 기술 개념이 얽혀 있지만, 프로토타입 개발 단
`1.2 직접 프로토타입 만들기`에서 이미 상호작용 가능한 프로토타입을 만들었습니다. 이제 해야 할 일은 프로토타입 안의 “AI처럼 보이는 기능”을 진짜 사용할 수 있는 능력으로 바꾸는 것입니다. **사용자가 버튼을 클릭하면 프로토타입이 외부 AI 서비스에 요청을 보내고, 반환된 텍스트를 화면에 표시**하게 만듭니다.
::: info ️ 원리 확장
원리 관련 내용을 더 알고 싶다면 부록 [대형 언어 모델(LLM) 입문](/ko-kr/appendix/8-artificial-intelligence/llm-principles)을 확인하세요.
원리 관련 내용을 더 알고 싶다면 부록 [대형 언어 모델(LLM) 입문](/zh-cn/appendix/8-artificial-intelligence/llm-principles)을 확인하세요.
::: details 더 알아보기: DeepSeek이란 무엇인가?
**항저우 DeepSeek 인공지능 기초기술 연구유한회사**(Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.)는 DeepSeek이라는 상호로 운영되는 **대형 언어 모델(LLMs)을 개발하는 중국 인공지능(AI) 회사**입니다. DeepSeek은 저장성 항저우에 본사를 두고 있으며, 중국 헤지펀드 환팡퀀트(High-Flyer)가 소유하고 자금을 지원합니다. DeepSeek은 환팡퀀트 공동 창업자인 Liang Wenfeng이 2023년 7월 설립했으며, 그는 두 회사의 CEO도 겸하고 있습니다. 이 회사는 2025년 1월 동명의 챗봇과 DeepSeek-R1 모델을 출시했습니다.
@@ -219,7 +219,7 @@ MiniMax의 API 형식은 DeepSeek과 거의 완전히 같습니다. 둘 다 Open
# 3. 이미지-텍스트 API 연결하기: Qwen3 VL
::: info ️ 원리 확장
원리 관련 내용을 더 알고 싶다면 부록 [비전 언어 모델(VLM) 입문](/ko-kr/appendix/8-artificial-intelligence/multimodal-models)을 확인하세요.
원리 관련 내용을 더 알고 싶다면 부록 [비전 언어 모델(VLM) 입문](/zh-cn/appendix/8-artificial-intelligence/multimodal-models)을 확인하세요.
::: details 더 알아보기: Qwen3 VL이란 무엇인가?
@@ -369,7 +369,7 @@ caption = caption_image(image_path)
앞부분에서는 주로 텍스트 관련 작업을 다뤘습니다. 이제 이미지 생성 기능을 연결해 보겠습니다. 텍스트 설명에서 이미지를 생성하거나 이미지를 수정하는 기능을 지원합니다.
::: info ️ 원리 확장
원리 관련 내용을 더 알고 싶다면 부록 [이미지 생성 입문](/ko-kr/appendix/8-artificial-intelligence/image-generation)을 확인하세요.
원리 관련 내용을 더 알고 싶다면 부록 [이미지 생성 입문](/zh-cn/appendix/8-artificial-intelligence/image-generation)을 확인하세요.
::: details 더 알아보기: [Seedream](https://seed.bytedance.com/en/seedream4_5)이란 무엇인가?
@@ -68,7 +68,7 @@ AI 시대, 특히 AI IDE를 사용할 때는 핵심 원칙 하나를 기억하
## 2. IDE란 무엇이고 왜 필요할까
::: info 예습 팁
IDE가 무엇인지, 각 인터페이스 요소가 어떤 역할을 하는지 아직 익숙하지 않다면 [IDE 소개](/ko-kr/appendix/2-development-tools/ide-basics)를 먼저 읽고 IDE의 기본 개념과 흔한 기능을 예습하는 것이 좋습니다.
IDE가 무엇인지, 각 인터페이스 요소가 어떤 역할을 하는지 아직 익숙하지 않다면 [IDE 소개](/zh-cn/appendix/2-development-tools/ide-basics)를 먼저 읽고 IDE의 기본 개념과 흔한 기능을 예습하는 것이 좋습니다.
:::
초기 프로그래밍 시대에는 간단한 텍스트 편집기와 언어 처리기만 있으면 충분했습니다. 하지만 프로젝트 복잡도가 증가하면서 개발자들은 파일을 효율적으로 관리하고, 문법 강조와 디버깅을 지원하는 도구를 절실히 필요로 하게 되었고, 그래서 통합 개발 환경(IDE)이 등장했습니다.
@@ -103,7 +103,7 @@ VS Code의 핵심 철학은 “모든 것은 플러그인”입니다. 플러그
정리하면 IDE는 개발자가 코드를 효율적으로 쓰고 프로그램을 실행하도록 돕는 도구 묶음입니다.
더 구체적인 설명은 [부록의 가상 IDE 시각화 IDE 원리 부분](/ko-kr/appendix/2-development-tools/ide-basics)을 확인하세요.
더 구체적인 설명은 [부록의 가상 IDE 시각화 IDE 원리 부분](/zh-cn/appendix/2-development-tools/ide-basics)을 확인하세요.
## 3. AI IDE와 일반 IDE는 무엇이 다를까
@@ -507,7 +507,7 @@ vibe coding 초보자에게 가장 어려운 것은 오히려 무엇이 “베
- **Panel(하단 패널)**: 터미널과 출력 창을 포함합니다.
- **Status Bar(상태 표시줄)**: 현재 환경 상태를 표시합니다.
더 구체적인 설명은 [부록의 가상 IDE 시각화 IDE 원리 부분](/ko-kr/appendix/2-development-tools/ide-basics)을 확인하세요.
더 구체적인 설명은 [부록의 가상 IDE 시각화 IDE 원리 부분](/zh-cn/appendix/2-development-tools/ide-basics)을 확인하세요.
<div style="margin: 50px 0;">
<ClientOnly>
@@ -771,7 +771,7 @@ AI가 아주 성실하게 코드를 줬고, 당신도 정직하게 복사했지
<span style="font-size: 12px; color: #909399">이해되지 않는 컴퓨터 용어를 만났을 때 여기서 빠르게 의미를 확인하세요. 한 번 통독하는 것을 추천합니다.</span>
</el-col>
<el-col :span="12">
<a href="/ko-kr/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>부록 2: Visual Studio Code 메뉴 막대 해석</b></a><br/>
<a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>부록 2: Visual Studio Code 메뉴 막대 해석</b></a><br/>
<span style="font-size: 12px; color: #909399">AI IDE 인터페이스가 어떤 역할을 하는지 모를 때 아래 내용을 AI와 대화하며 확인하거나 직접 읽어 보세요.</span>
</el-col>
</el-row>
@@ -291,7 +291,7 @@ Yêu cầu:
### 2.4 Để AI IDE sinh code
Nếu chưa quen AI IDE như Cursor, Trae hoặc Windsurf, hãy xem trước [IDE cơ bản](/vi-vn/appendix/2-development-tools/ide-basics/): cách tạo dự án, nói chuyện với Agent và đọc quá trình sinh code.
Nếu chưa quen AI IDE như Cursor, Trae hoặc Windsurf, hãy xem trước [IDE cơ bản](/zh-cn/appendix/2-development-tools/ide-basics/): cách tạo dự án, nói chuyện với Agent và đọc quá trình sinh code.
Tạo một thư mục mới rồi mở trong AI IDE:
@@ -58,7 +58,7 @@ Cụ thể, bạn cần nắm các yếu tố cốt lõi sau:
6. **Xử lý lỗi**: khi có vấn đề như API Key sai hoặc yêu cầu quá thường xuyên, biết cách kiểm tra và giải quyết.
::: info ️ API là gì
Để hiểu sâu hơn về API, hãy xem phụ lục: [Nhập môn API](/vi-vn/appendix/4-server-and-backend/api-intro).
Để hiểu sâu hơn về API, hãy xem phụ lục: [Nhập môn API](/zh-cn/appendix/4-server-and-backend/api-intro).
::: warning 🔐 **Lưu ý an toàn API**
API Key là "thẻ thông hành" để bạn yêu cầu dịch vụ AI. Nó là một chuỗi mật khẩu dùng cho xác thực danh tính và tính phí.
@@ -93,7 +93,7 @@ Sau khi nắm được các khái niệm này, bạn sẽ thấy dù kết nối
Trong `1.2 Tự tay làm ra nguyên mẫu`, bạn đã tạo được một nguyên mẫu có thể tương tác. Tiếp theo, việc cần làm là biến những chức năng "trông giống AI" trong nguyên mẫu thành năng lực thật sự dùng được: **khi người dùng bấm nút, nguyên mẫu sẽ gửi yêu cầu tới dịch vụ AI bên ngoài và hiển thị văn bản trả về.**
::: info ️ Mở rộng nguyên lý
Nếu muốn hiểu thêm nội dung liên quan đến nguyên lý, hãy xem phụ lục: [Nhập môn mô hình ngôn ngữ lớn (LLM)](/vi-vn/appendix/8-artificial-intelligence/llm-principles).
Nếu muốn hiểu thêm nội dung liên quan đến nguyên lý, hãy xem phụ lục: [Nhập môn mô hình ngôn ngữ lớn (LLM)](/zh-cn/appendix/8-artificial-intelligence/llm-principles).
::: details Tìm hiểu thêm: DeepSeek là gì?
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, hoạt động dưới thương hiệu DeepSeek, là một **công ty trí tuệ nhân tạo Trung Quốc phát triển mô hình ngôn ngữ lớn (LLMs)**. DeepSeek đặt trụ sở tại Hàng Châu, Chiết Giang, thuộc sở hữu và được tài trợ bởi quỹ định lượng Trung Quốc High-Flyer. DeepSeek được thành lập vào tháng 7 năm 2023 bởi Liang Wenfeng, đồng sáng lập High-Flyer, người đồng thời là CEO của cả hai công ty. Tháng 1 năm 2025, công ty ra mắt chatbot cùng tên và mô hình DeepSeek-R1.
@@ -219,7 +219,7 @@ Thông tin thêm xem [tài liệu giao diện tương thích OpenAI của MiniMa
# 3. Tich hop API chuyen hinh anh thanh van ban: Qwen3 VL
::: info ️ Mo rong nguyen ly
Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon mo hinh thi giac-ngon ngu (VLM)](/vi-vn/appendix/8-artificial-intelligence/multimodal-models).
Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon mo hinh thi giac-ngon ngu (VLM)](/zh-cn/appendix/8-artificial-intelligence/multimodal-models).
::: details Tim hieu them: Qwen3 VL la gi?
@@ -369,7 +369,7 @@ Cuoi cung, ket qua tao ra nhu sau:
Trong cac phan truoc, chung ta chu yeu lam viec voi tac vu lien quan den van ban. Tiep theo, chung ta se thu tich hop tinh nang tao hinh anh, ho tro tao hinh tu mo ta bang van ban hoac chinh sua hinh anh co san.
::: info ️ Mo rong nguyen ly
Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon tao hinh anh](/vi-vn/appendix/8-artificial-intelligence/image-generation).
Neu ban muon tim hieu them ve nguyen ly lien quan, hay xem phu luc: [Nhap mon tao hinh anh](/zh-cn/appendix/8-artificial-intelligence/image-generation).
::: details Tim hieu them: [Seedream](https://seed.bytedance.com/en/seedream4_5) la gi?
@@ -68,7 +68,7 @@ Vì vậy, bạn cần một IDE (Integrated Development Environment, môi trư
## 2. IDE là gì, vì sao cần IDE
::: info Gợi ý đọc trước
Nếu bạn chưa quen IDE là gì và từng phần giao diện có tác dụng gì, nên đọc trước [Giới thiệu IDE](/vi-vn/appendix/2-development-tools/ide-basics) để hiểu các khái niệm cơ bản và chức năng thường gặp của IDE.
Nếu bạn chưa quen IDE là gì và từng phần giao diện có tác dụng gì, nên đọc trước [Giới thiệu IDE](/zh-cn/appendix/2-development-tools/ide-basics) để hiểu các khái niệm cơ bản và chức năng thường gặp của IDE.
:::
Trong giai đoạn đầu của lập trình, chúng ta chỉ cần một trình soạn thảo văn bản đơn giản và bộ xử lý ngôn ngữ. Nhưng khi độ phức tạp của dự án tăng lên, lập trình viên rất cần một công cụ có thể quản lý tệp hiệu quả, hỗ trợ tô sáng cú pháp và debug. Vì vậy, môi trường phát triển tích hợp (IDE) ra đời.
@@ -103,7 +103,7 @@ Thậm chí có thể dùng để chỉnh sửa tài liệu Markdown.
Tóm lại, IDE là một bộ công cụ giúp lập trình viên viết code và chạy chương trình hiệu quả.
Để xem giải thích cụ thể hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/vi-vn/appendix/2-development-tools/ide-basics).
Để xem giải thích cụ thể hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/zh-cn/appendix/2-development-tools/ide-basics).
## 3. AI IDE khác IDE thông thường ở đâu
@@ -507,7 +507,7 @@ Tác dụng cụ thể của từng phần là:
- **Panel (panel dưới)**: gồm terminal và cửa sổ output.
- **Status Bar (thanh trạng thái)**: hiển thị trạng thái môi trường hiện tại.
Để xem giải thích chi tiết hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/vi-vn/appendix/2-development-tools/ide-basics).
Để xem giải thích chi tiết hơn, hãy đọc [phần nguyên lý trực quan hóa IDE trong phụ lục](/zh-cn/appendix/2-development-tools/ide-basics).
<div style="margin: 50px 0;">
<ClientOnly>
@@ -771,7 +771,7 @@ Chương tiếp theo, chúng ta sẽ chuyển trọng tâm từ "biết dùng c
<span style="font-size: 12px; color: #909399">Khi thấy thuật ngữ máy tính không hiểu, hãy đến đây tra nhanh ý nghĩa. Nên đọc lướt một lần.</span>
</el-col>
<el-col :span="12">
<a href="/vi-vn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Phụ lục 2: giải thích thanh menu Visual Studio Code</b></a><br/>
<a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Phụ lục 2: giải thích thanh menu Visual Studio Code</b></a><br/>
<span style="font-size: 12px; color: #909399">Khi không biết giao diện AI IDE dùng để làm gì, hãy dùng nội dung dưới đây để hỏi AI hoặc trực tiếp đọc.</span>
</el-col>
</el-row>
@@ -304,7 +304,7 @@ AI 出現之後,第一次給了普通人一個全新的可能:你不需要
此外,我們還可以要求 LLM 幫你直接生成專案級的提示詞。在上一節中,我們只自己寫了貪喫蛇遊戲的提示詞。現在讓我們嘗試讓大模型生成一個帶有整體框架和實現路徑的提示詞(你可以直接用 z.ai 生成)。
如果你想學習如何寫出更好的提示詞,可以檢視[提示詞工程附錄](/zh-tw/appendix/8-artificial-intelligence/prompt-engineering)。
如果你想學習如何寫出更好的提示詞,可以檢視[提示詞工程附錄](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering)。
> 我想讓 AI 生成一個網頁貪喫蛇遊戲,需要一個更完整的提示詞,讓生成結果更令人印象深刻和有趣。請生成相應的提示詞。當前目標是:生成一個貪喫蛇遊戲,需要實現喫不同單詞生成詩歌的功能,並且應該包含影象生成模組。
@@ -643,7 +643,7 @@ z.ai 的回覆將會是這樣的:
> "用 React 做一個排行榜頁面,右側顯示分數列表,點選某行在下方展示玩家詳情,風格簡潔現代。"
如果你想深入理解 HTML、CSS、JavaScript 等前端基礎知識,可以檢視[Web 基礎附錄](/zh-tw/appendix/3-browser-and-frontend/javascript-deep-dive)。想了解前端技術的發展歷程,可以檢視[前端進化史附錄](/zh-tw/appendix/3-browser-and-frontend/frontend-frameworks)。
如果你想深入理解 HTML、CSS、JavaScript 等前端基礎知識,可以檢視[Web 基礎附錄](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive)。想了解前端技術的發展歷程,可以檢視[前端進化史附錄](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks)。
## <span id="appendix-2">[附錄 2:到底什麼是 Vibe Coding](#appendix-nav)</span>
@@ -344,7 +344,7 @@ AI 會返回一份結構化的需求和對應的提示詞。你自己檢查一
#### 2.2.1 準備工作:瞭解 AI IDE 的基本操作
如果你還不熟悉 AI IDE(如 Cursor、Trae、Windsurf 等)的基本使用方式,建議先看附錄中的[IDE 基礎教程](/zh-tw/appendix/2-development-tools/ide-basics/),瞭解如何:
如果你還不熟悉 AI IDE(如 Cursor、Trae、Windsurf 等)的基本使用方式,建議先看附錄中的[IDE 基礎教程](/zh-cn/appendix/2-development-tools/ide-basics/),瞭解如何:
- 建立新專案
- 與 AI Agent 對話
- 理解 AI 的程式碼生成過程
@@ -58,7 +58,7 @@ API 是計算機領域的一個重要抽象概念,我們可以簡單理解為
6. **錯誤處理**:當出現問題時(如API Key錯誤、請求太頻繁等),知道如何排查解決。
::: info ️ 什麼是 API
對於 API 的更深入的解釋,請看附錄:[API 入門](/zh-tw/appendix/4-server-and-backend/api-intro)。
對於 API 的更深入的解釋,請看附錄:[API 入門](/zh-cn/appendix/4-server-and-backend/api-intro)。
::: warning 🔐 **API 安全注意事項**
API Key 是你請求 AI 服務的「通行證」,它是一串密碼字串,用於身份驗證和計費。
@@ -93,7 +93,7 @@ API Key 是你請求 AI 服務的「通行證」,它是一串密碼字串,
`1.2 動手做出原型` 裡,你已經做出了一個可互動的原型。接下來我們要做的,是把原型裡“看起來像 AI 的功能”變成真正可用的能力:**當使用者點選按鈕時,原型會向外部的 AI 服務發出請求,並把返回的文字展示出來。**
::: info ️ 原理延伸
如果你想了解更多原理相關的內容,請檢視附錄:[大語言模型(LLM)入門](/zh-tw/appendix/8-artificial-intelligence/llm-principles)。
如果你想了解更多原理相關的內容,請檢視附錄:[大語言模型(LLM)入門](/zh-cn/appendix/8-artificial-intelligence/llm-principles)。
::: details 瞭解更多:DeepSeek 是什麼?
**杭州深度求索人工智慧基礎技術研究有限公司**(Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.),以 DeepSeek 為商號,是一家**開發大語言模型(LLMs)的中國人工智慧(AI)公司**。DeepSeek 總部位於浙江杭州,由中國對沖基金幻方量化(High-Flyer)擁有並資助。DeepSeek 由幻方量化的聯合創始人梁文鋒於 2023 年 7 月創立,他也同時擔任這兩家公司的 CEO。該公司於 2025 年 1 月推出了同名聊天機器人及其 DeepSeek-R1 模型。
@@ -219,7 +219,7 @@ MiniMax 的 API 格式與 DeepSeek 幾乎完全一致(都是 OpenAI 相容格
# 3. 接入影象轉文字 APIQwen3 VL
::: info ️ 原理延伸
如果你想了解更多原理相關的內容,請檢視附錄:[視覺語言模型(VLM)入門](/zh-tw/appendix/8-artificial-intelligence/multimodal-models)。
如果你想了解更多原理相關的內容,請檢視附錄:[視覺語言模型(VLM)入門](/zh-cn/appendix/8-artificial-intelligence/multimodal-models)。
::: details 瞭解更多:Qwen3 VL 是什麼?
@@ -369,7 +369,7 @@ caption = caption_image(image_path)
在前面的部分我們主要和文字相關的任務打交道,接下來我們將嘗試接入圖片生成的功能,支援從文字描述生成圖片,或者對圖片進行修改。
::: info ️ 原理延伸
如果你想了解更多原理相關的內容,請檢視附錄:[影象生成入門](/zh-tw/appendix/8-artificial-intelligence/image-generation)。
如果你想了解更多原理相關的內容,請檢視附錄:[影象生成入門](/zh-cn/appendix/8-artificial-intelligence/image-generation)。
::: details 瞭解更多:什麼是 [Seedream 即夢](https://seed.bytedance.com/en/seedream4_5)
@@ -68,7 +68,7 @@ const relatedArticles =
## 2. 什麼是 IDE,為什麼需要 IDE
::: info 預習提示
如果你還不熟悉 IDE 是什麼、各個介面元素有什麼作用,建議先閱讀 [IDE 簡介](/zh-tw/appendix/2-development-tools/ide-basics) 進行預習,瞭解 IDE 的基本概念和常見功能。
如果你還不熟悉 IDE 是什麼、各個介面元素有什麼作用,建議先閱讀 [IDE 簡介](/zh-cn/appendix/2-development-tools/ide-basics) 進行預習,瞭解 IDE 的基本概念和常見功能。
:::
在早期程式設計時代,我們只需要簡單文字編輯器和語言處理器即可。但隨著專案複雜度增加,開發者迫切需要一種能高效管理檔案、支援語法高亮和除錯的工具,於是整合開發環境(IDE)應運而生。
@@ -103,7 +103,7 @@ VS Code 的核心理念是“一切皆外掛”。它透過外掛機制支援各
總之,IDE 是一套幫助開發者高效寫程式碼和執行程式的工具集。
更具體的詳細內容解釋,請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。
更具體的詳細內容解釋,請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)。
## 3. AI IDE 和普通 IDE 有什麼不同
@@ -507,7 +507,7 @@ AI 會根據你的描述,直接修改 React 元件和樣式。儲存後重新
- **Panel(底部面板)**:包含終端和輸出視窗。
- **Status Bar(狀態列)**:顯示當前環境狀態。
更具體的詳細內容解釋,請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-tw/appendix/2-development-tools/ide-basics)。
更具體的詳細內容解釋,請檢視[附錄中的 虛擬 IDE 視覺化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)。
<div style="margin: 50px 0;">
<ClientOnly>
@@ -771,7 +771,7 @@ AI 很認真地給了你一段程式碼,你也老老實實地複製進去了
<span style="font-size: 12px; color: #909399">看到不懂的計算機名詞時,來這裡快速查含義,推薦通讀一遍。</span>
</el-col>
<el-col :span="12">
<a href="/zh-tw/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>附錄二:Visual Studio Code 選單欄解析</b></a><br/>
<a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>附錄二:Visual Studio Code 選單欄解析</b></a><br/>
<span style="font-size: 12px; color: #909399">不知道 AI IDE 的介面有什麼用的時候,拿以下內容和 AI 對話進行查閱,或者直接檢視。</span>
</el-col>
</el-row>