feat: Add Azure AI Foundry models (gpt-5.2, gpt-5.1) with distinct color schemes

- Backend: Add AzureFoundryAdapter for Foundry project endpoint
- Backend: Configure gpt-5.2 (aqua blue #00b4d8) and gpt-5.1 (ocean blue #0077b6) in model config
- Frontend: Add model options to dropdown with distinct color indicators
- Frontend: Apply consistent color scheme across buttons, message labels, and modal indicators
- Docs: Update README files with Foundry models setup instructions
- Docs: Sync GitHub Pages with Foundry models info and colored chips
- Tests: Add testFoundryModels.js for integration testing
- Config: Update .envtemplate with AZURE_AI_FOUNDRY_ENDPOINT/KEY examples

Author: Ming

.envtemplate

@@ -63,4 +63,9 @@ GPT_4_1_MINI_API_URL=https://yourserver.openai.azure.com/openai/deployments/gpt-
 GPT_4_1_MINI_API_KEY=your-gpt41-mini-key
 
 SORA_API_URL=https://yourserver.openai.azure.com/openai/deployments/sora/video/generations/jobs?api-version=2025-02-15-preview
-SORA_API_KEY=your-sora-api-key
+SORA_API_KEY=your-sora-api-key
+
+# Azure AI Foundry Project Endpoint Configuration
+# For models deployed through Azure AI Foundry projects (gpt-5.2, gpt-5.1, etc.)
+AZURE_AI_FOUNDRY_ENDPOINT=https://your-project-resource.services.ai.azure.com/api/projects/your-project/chat/completions?api-version=2024-05-01-preview
+AZURE_AI_FOUNDRY_KEY=your-foundry-api-key

.vscode/settings.json

@@ -13,5 +13,6 @@
     "editor.formatOnSave": false,
     // Only format when ESLint configuration is detected
     "editor.formatOnSaveMode": "modificationsIfAvailable",
+    "liveServer.settings.port": 5501,
 
 }

README.md

@@ -3,13 +3,13 @@
 > **Language / 语言**: [English](README.md) | [中文](README.zh-CN.md)  
 > **Live Demo / 在线演示**: [English](https://hddevteam.github.io/Azure-chatGPT-demo/) | [中文](https://hddevteam.github.io/Azure-chatGPT-demo/zh-cn/)
 
-Welcome to Azure chatGPT, a fascinating chatGPT web app built with Node.js and leveraging the latest Azure OpenAI models including **GPT-5 series** (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), **O-series reasoning models** (o3, o3-mini, o4-mini), GPT-4o-realtime/o1/o1-mini/GPT-4O/GPT-4O-mini/GPT-4.1 series, enhanced with cutting-edge Sora AI video generation capabilities. This project serves as an excellent starting point for developers interested in developing comprehensive AI applications using JavaScript, the Azure OpenAI API, and advanced video generation features.
+Welcome to Azure chatGPT, a fascinating chatGPT web app built with Node.js and leveraging the latest Azure OpenAI models including **GPT-5 series** (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat) and **Azure AI Foundry models** (gpt-5.2, gpt-5.1), **O-series reasoning models** (o3, o3-mini, o4-mini), GPT-4o-realtime/o1/o1-mini/GPT-4O/GPT-4O-mini/GPT-4.1 series, enhanced with cutting-edge Sora AI video generation capabilities. This project serves as an excellent starting point for developers interested in developing comprehensive AI applications using JavaScript, the Azure OpenAI API, and advanced video generation features.
 
 ## 📚 Learnings from this Project
 
 By working on this project, you will gain hands-on experience with several key APIs and services, including:
 
-- **Azure OpenAI API**: Learn how to integrate and utilize various advanced GPT models, including **GPT-5 series** (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), **O-series reasoning models** (o3, o3-mini, o4-mini), GPT-4o, GPT-4o-mini, GPT-4o-realtime, and GPT-4.1 series to build intelligent conversational agents with cutting-edge capabilities.
+- **Azure OpenAI API**: Learn how to integrate and utilize various advanced GPT models, including **GPT-5 series** (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), **Azure AI Foundry models** (gpt-5.2, gpt-5.1), **O-series reasoning models** (o3, o3-mini, o4-mini), GPT-4o, GPT-4o-mini, GPT-4o-realtime, and GPT-4.1 series to build intelligent conversational agents with cutting-edge capabilities.
 - **Sora Video Generation API**: Master advanced AI video generation capabilities, including text-to-video conversion, job management, and asynchronous processing workflows.
 
 - **Azure Speech Service**: Understand how to implement both Text-to-Speech and Speech-to-Text functionalities to enhance user interactions with voice capabilities.
@@ -25,6 +25,7 @@ These learnings will equip you with the skills to build robust, feature-rich cha
 - **🎬 NEW: Sora AI Video Generation - Create stunning videos from text descriptions using OpenAI's cutting-edge Sora model! 🎬**
 ![Sora Video Generation Screenshot](screenshots/screenshot_sora.jpeg)
 - **🎉Support for GPT-5 Series - Latest reasoning models with enhanced capabilities: gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat🎉**
+- **🚀Support for Azure AI Foundry Models - GPT-5.2 and GPT-5.1 deployed through Azure AI Foundry project endpoints (distinct UI colors for quick identification)🚀**
 - **🎉Support for O-series Models - Advanced reasoning capabilities: o3, o3-mini, o4-mini🎉**
 - **🎙️Enhanced Realtime Voice Chat - dual GPT Realtime models (gpt-realtime & gpt-realtime-mini), instant model switching, 8 voice options, and speaker mute control🎙️**
 - **✨Support PWA (Progressive Web App)✨**
@@ -125,6 +126,10 @@ This application now includes powerful video generation capabilities powered by
    O4_MINI_API_URL=https://yourserver.openai.azure.com/openai/deployments/o4-mini/chat/completions?api-version=2024-12-01-preview
    O4_MINI_API_KEY=your-o4-mini-key
    
+   # Azure AI Foundry Project Endpoint (for gpt-5.2, gpt-5.1, etc.)
+   AZURE_AI_FOUNDRY_ENDPOINT=https://your-project-resource.services.ai.azure.com/api/projects/your-project/chat/completions?api-version=2024-05-01-preview
+   AZURE_AI_FOUNDRY_KEY=your-foundry-api-key
+   
    # Traditional O1 Models
    O1_MINI_API_URL=https://yourserver.openai.azure.com/openai/deployments/o1-mini/chat/completions?api-version=2024-12-01-preview
    O1_MINI_API_KEY=your-o1-mini-key

README.zh-CN.md

@@ -1,12 +1,12 @@
 # 🤖 强大的 Azure OpenAI GPT 模型 chatGPT 与 Sora 视频生成
 
-欢迎使用 Azure chatGPT，这是一个基于 Node.js 构建的迷人 chatGPT 网络应用，利用最新的 Azure OpenAI 模型，包括 **GPT-5 系列**（gpt-5、gpt-5-mini、gpt-5-nano、gpt-5-chat）、**O系列推理模型**（o3、o3-mini、o4-mini）、GPT-4o-realtime/o1/o1-mini/GPT-4O/GPT-4O-mini/GPT-4.1 系列，并增强了尖端的 Sora AI 视频生成功能。该项目为对使用 JavaScript、Azure OpenAI API 和高级视频生成功能开发综合 AI 应用程序感兴趣的开发者提供了一个绝佳的起点。
+欢迎使用 Azure chatGPT，这是一个基于 Node.js 构建的迷人 chatGPT 网络应用，利用最新的 Azure OpenAI 模型，包括 **GPT-5 系列**（gpt-5、gpt-5-mini、gpt-5-nano、gpt-5-chat）、**Azure AI Foundry 模型**（gpt-5.2、gpt-5.1）、**O系列推理模型**（o3、o3-mini、o4-mini）、GPT-4o-realtime/o1/o1-mini/GPT-4O/GPT-4O-mini/GPT-4.1 系列，并增强了尖端的 Sora AI 视频生成功能。该项目为对使用 JavaScript、Azure OpenAI API 和高级视频生成功能开发综合 AI 应用程序感兴趣的开发者提供了一个绝佳的起点。
 
 ## 📚 项目学习收获
 
 通过这个项目，您将获得几个关键 API 和服务的实践经验，包括：
 
-- **Azure OpenAI API**：学习如何集成和利用各种先进的 GPT 模型，包括 **GPT-5 系列**（gpt-5、gpt-5-mini、gpt-5-nano、gpt-5-chat）、**O系列推理模型**（o3、o3-mini、o4-mini）、GPT-4o、GPT-4o-mini、GPT-4o-realtime 和 GPT-4.1 系列，构建具有尖端功能的智能对话代理。
+- **Azure OpenAI API**：学习如何集成和利用各种先进的 GPT 模型，包括 **GPT-5 系列**（gpt-5、gpt-5-mini、gpt-5-nano、gpt-5-chat）、**Azure AI Foundry 模型**（gpt-5.2、gpt-5.1）、**O系列推理模型**（o3、o3-mini、o4-mini）、GPT-4o、GPT-4o-mini、GPT-4o-realtime 和 GPT-4.1 系列，构建具有尖端功能的智能对话代理。
 - **Sora 视频生成 API**：掌握高级 AI 视频生成功能，包括文本转视频、作业管理和异步处理工作流。
 
 - **Azure 语音服务**：了解如何实现文本转语音和语音转文本功能，通过语音功能增强用户交互。
@@ -22,6 +22,7 @@
 - **🎬 新功能：Sora AI 视频生成 - 使用 OpenAI 尖端的 Sora 模型从文本描述创建惊人的视频！🎬**
 ![Sora 视频生成截图](screenshots/screenshot_sora.jpeg)
 - **🎉支持 GPT-5 系列 - 最新推理模型，具备增强功能：gpt-5、gpt-5-mini、gpt-5-nano、gpt-5-chat🎉**
+- **🚀支持 Azure AI Foundry 模型 - 通过 Azure AI Foundry 项目端点部署的 GPT-5.2 和 GPT-5.1（前端使用独立颜色便于区分）🚀**
 - **🎉支持 O系列模型 - 高级推理能力：o3、o3-mini、o4-mini🎉**
 - **🎙️增强版实时语音聊天 - 提供 gpt-realtime 与 gpt-realtime-mini 双模型、即时切换、8 种语音以及扬声器静音控制🎙️**
 - **✨支持 PWA（渐进式网络应用程序）✨**

docs/assets/css/style.css

@@ -441,6 +441,31 @@ p {
     font-size: 1rem;
 }
 
+/* Model chips (used in GitHub Pages to highlight model support) */
+.model-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.15rem 0.55rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: #fff;
+    vertical-align: baseline;
+    white-space: nowrap;
+}
+
+.model-chip::before {
+    content: "●";
+    font-size: 0.85em;
+    line-height: 1;
+    opacity: 0.9;
+}
+
+.model-chip--gpt52 { background: #00b4d8; }
+.model-chip--gpt51 { background: #0077b6; }
+
 .feature-card__list {
     list-style: none;
     padding: 0;

docs/index.html

@@ -4,21 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Azure ChatGPT Demo - Powerful AI & Sora Video Generation</title>
-    <meta name="description" content="Experience the next generation of AI conversation with Azure OpenAI GPT-5, GPT-4o, O-series reasoning models, Sora video generation, real-time voice chat, and comprehensive AI features. Open source and ready to deploy.">
-    <meta name="keywords" content="Azure OpenAI, ChatGPT, GPT-5, GPT-4o, O-series models, Sora video generation, AI chat, Node.js, realtime voice, reasoning models">
+    <meta name="description" content="Experience the next generation of AI conversation with Azure OpenAI GPT-5, Azure AI Foundry models (gpt-5.2, gpt-5.1), GPT-4o, O-series reasoning models, Sora video generation, real-time voice chat, and comprehensive AI features. Open source and ready to deploy.">
+    <meta name="keywords" content="Azure OpenAI, Azure AI Foundry, ChatGPT, GPT-5, gpt-5.2, gpt-5.1, GPT-4o, O-series models, Sora video generation, AI chat, Node.js, realtime voice, reasoning models">
     <meta name="author" content="HDDevTeam">
 
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="AI007 - Azure ChatGPT Demo with GPT-5 & Sora Video Generation">
-    <meta property="og:description" content="Powerful chatGPT web app with Azure OpenAI GPT-5, GPT-4o, O-series reasoning models, Sora AI video generation, and real-time voice capabilities.">
+    <meta property="og:description" content="Powerful chatGPT web app with Azure OpenAI GPT-5, Azure AI Foundry models (gpt-5.2, gpt-5.1), GPT-4o, O-series reasoning models, Sora AI video generation, and real-time voice capabilities.">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://hddevteam.github.io/Azure-chatGPT-demo/">
     <meta property="og:image" content="https://hddevteam.github.io/Azure-chatGPT-demo/assets/images/icons/512.png">
 
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="AI007 - Azure ChatGPT Demo with GPT-5 & Sora Video Generation">
-    <meta name="twitter:description" content="Powerful chatGPT web app with Azure OpenAI GPT-5, GPT-4o, O-series reasoning models, Sora AI video generation, and real-time voice capabilities.">
+    <meta name="twitter:description" content="Powerful chatGPT web app with Azure OpenAI GPT-5, Azure AI Foundry models (gpt-5.2, gpt-5.1), GPT-4o, O-series reasoning models, Sora AI video generation, and real-time voice capabilities.">
     <meta name="twitter:image" content="https://hddevteam.github.io/Azure-chatGPT-demo/assets/images/icons/512.png">
 
     <!-- Structured Data -->
@@ -27,7 +27,7 @@
         "@context": "https://schema.org",
         "@type": "SoftwareApplication",
         "name": "AI007 - Azure ChatGPT Demo",
-        "description": "Powerful chatGPT web app built with Node.js and leveraging Azure OpenAI GPT-5, GPT-4o, O-series reasoning models, Sora video generation, and real-time voice capabilities.",
+        "description": "Powerful chatGPT web app built with Node.js and leveraging Azure OpenAI GPT-5, Azure AI Foundry models (gpt-5.2, gpt-5.1), GPT-4o, O-series reasoning models, Sora video generation, and real-time voice capabilities.",
         "url": "https://hddevteam.github.io/Azure-chatGPT-demo/",
         "applicationCategory": "DeveloperApplication",
         "operatingSystem": "Cross-platform",
@@ -114,7 +114,7 @@ <h1 class="hero__title">
                     Powerful chatGPT for <span class="hero__title-highlight">Azure OpenAI</span>
                 </h1>
                 <p class="hero__subtitle">
-                    Experience the next generation of AI conversation with Azure OpenAI GPT-5 series (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), O-series reasoning models (o3, o3-mini, o4-mini), GPT-4o models, and GPT-4.1 series, enhanced with Sora video generation and real-time voice capabilities.
+                    Experience the next generation of AI conversation with Azure OpenAI GPT-5 series (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), Azure AI Foundry models (gpt-5.2, gpt-5.1), O-series reasoning models (o3, o3-mini, o4-mini), GPT-4o models, and GPT-4.1 series, enhanced with Sora video generation and real-time voice capabilities.
                 </p>
                 <div class="hero__features">
                     <div class="hero__feature">
@@ -188,7 +188,9 @@ <h3 class="feature-card__title">Enhanced Real-time Voice Chat</h3>
                     <div class="feature-card__icon"><svg class="icon" viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                     <h3 class="feature-card__title">Latest AI Models</h3>
                     <p class="feature-card__description">
-                        Support for the most advanced AI models including GPT-5 series (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), O-series reasoning models (o3, o3-mini, o4-mini), GPT-4o series, and GPT-4.1 series.
+                        Support for the most advanced AI models including GPT-5 series (gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat), Azure AI Foundry models
+                        (<span class="model-chip model-chip--gpt52">gpt-5.2</span> <span class="model-chip model-chip--gpt51">gpt-5.1</span>),
+                        O-series reasoning models (o3, o3-mini, o4-mini), GPT-4o series, and GPT-4.1 series.
                     </p>
                 </div>
 
@@ -314,10 +316,11 @@ <h3 class="step__title">Clone Repository</h3>
                         <div class="step__number">2</div>
                         <div class="step__content">
                             <h3 class="step__title">Configure Environment</h3>
-                            <p class="step__description">Set up your Azure OpenAI API keys and endpoints</p>
+                            <p class="step__description">Set up your Azure OpenAI credentials (and Azure AI Foundry project endpoint for gpt-5.2 / gpt-5.1)</p>
                             <div class="code-block">
                                 <code>cp .envtemplate .env
-# Edit .env with your Azure OpenAI credentials</code>
+# Edit .env with your Azure OpenAI credentials
+# If using Azure AI Foundry models (gpt-5.2 / gpt-5.1), also set AZURE_AI_FOUNDRY_ENDPOINT and AZURE_AI_FOUNDRY_KEY</code>
                                 <button class="code-block__copy" data-clipboard-text="cp .envtemplate .env" title="Copy to clipboard" aria-label="Copy command to clipboard">
                                     <svg viewBox="0 0 24 24" fill="currentColor">
                                         <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
@@ -361,10 +364,11 @@ <h3 class="step__title">Start the Application</h3>
                         <div class="step__number">2</div>
                         <div class="step__content">
                             <h3 class="step__title">Configure Environment</h3>
-                            <p class="step__description">Set up your Azure OpenAI API keys and endpoints</p>
+                            <p class="step__description">Set up your Azure OpenAI credentials (and Azure AI Foundry project endpoint for gpt-5.2 / gpt-5.1)</p>
                             <div class="code-block">
                                 <code>cp .envtemplate .env
-# Edit .env with your Azure OpenAI credentials</code>
+# Edit .env with your Azure OpenAI credentials
+# If using Azure AI Foundry models (gpt-5.2 / gpt-5.1), also set AZURE_AI_FOUNDRY_ENDPOINT and AZURE_AI_FOUNDRY_KEY</code>
                                 <button class="code-block__copy" data-clipboard-text="cp .envtemplate .env" title="Copy to clipboard" aria-label="Copy command to clipboard">
                                     <svg viewBox="0 0 24 24" fill="currentColor">
                                         <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
@@ -412,6 +416,7 @@ <h3 class="getting-started__requirements-title">Prerequisites</h3>
                     <ul class="getting-started__requirements-list">
                         <li>Node.js 16+ installed</li>
                         <li>Azure OpenAI API access</li>
+                        <li>(Optional) Azure AI Foundry project access (for gpt-5.2 / gpt-5.1)</li>
                         <li>Azure subscription (for advanced features)</li>
                         <li>Sora API access (for video generation)</li>
                     </ul>