通义千问代码模式正式上线
官方网站：
![图片[1]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_0.png)
目前官方的显示也是相当丰富的。
![图片[2]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_1.png)
在多端登录使用时发现一个问题就是之前的历史记录在代码模式下是没有的。
我这边把手机端的编辑的几个应用复制出来，进行查看。
1. 创业过程可视化演示
效果：
![图片[3]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_2.png)
这个图片是动态效果的。我把代码复制如下：
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>创业过程可视化演示</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <style> .container { position: relative; width: 100%; height: 600px; background-color: #f9fafb; } .timeline { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 4px; background-color: #d1d5db; } .marker { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: #34d399; border-radius: 50%; animation: moveMarker 10s infinite alternate; } @keyframes moveMarker { from { left: 0; } to { left: calc(100% - 20px); } } .description { position: absolute; top: 20%; width: 100%; text-align: center; font-size: 1.5em; color: #1e293b; } .slow-description { position: absolute; bottom: 20%; width: 100%; text-align: center; font-size: 1.5em; color: #1e293b; } .fast-description { position: absolute; bottom: 20%; width: 100%; text-align: center; font-size: 1.5em; color: #dc2626; display: none; } .svg-container { position: absolute; top: 30%; width: 100%; text-align: center; } </style> </head> <body class="bg-gray-100 flex items-center justify-center min-h-screen"> <div class="container"> <div class="timeline"></div> <div class="marker"></div> <div class="description">创业是一个持续的过程，既不能过急也不能过慢。</div> <div class="slow-description">慢慢来，稳扎稳打，确保每一步都正确无误。</div> <div class="fast-description">急于求成，可能会导致错误和失败。</div> <div class="svg-container"> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="50" r="10" fill="#34d399" /> <line x1="30" y1="50" x2="170" y2="50" stroke="#d1d5db" stroke-width="4" /> <circle cx="180" cy="50" r="10" fill="#34d399" /> <path d="M30 50 C100 20, 150 80, 170 50" stroke="#dc2626" stroke-width="4" fill="none" opacity="0.5" /> <text x="20" y="30" font-family="Arial" font-size="12" fill="#1e293b">开始</text> <text x="180" y="30" font-family="Arial" font-size="12" fill="#1e293b">成功</text> <text x="100" y="10" font-family="Arial" font-size="12" fill="#dc2626">过于急进</text> <text x="100" y="90" font-family="Arial" font-size="12" fill="#34d399">稳健前行</text> </svg> </div> </div> <script> const marker = document.querySelector('.marker'); const slowDescription = document.querySelector('.slow-description'); const fastDescription = document.querySelector('.fast-description'); marker.addEventListener('animationiteration', () => { if (slowDescription.style.display === 'none') { slowDescription.style.display = 'block'; fastDescription.style.display = 'none'; } else { slowDescription.style.display = 'none'; fastDescription.style.display = 'block'; } }); </script> </body> </html>2. 王阳明知行合一哲学精髓
效果：
![图片[4]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_3.png)
代码：
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>王阳明知行合一哲学精髓</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <style> body { background-color: #f9fafb; color: #1e293b; font-family: 'Arial', sans-serif; } .container { position: relative; width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; } .svg-container { position: relative; width: 600px; height: 400px; } .circle { fill: #34d399; stroke: #1e293b; stroke-width: 2; } .line { stroke: #1e293b; stroke-width: 2; } .text { font-size: 1em; fill: #1e293b; text-anchor: middle; } .description { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1.5em; color: #1e293b; } .title { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 2em; color: #1e293b; } </style> </head> <body class="bg-gray-100 flex items-center justify-center min-h-screen"> <div class="container"> <div class="svg-container"> <svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="200" r="50" class="circle" /> <text x="150" y="210" class="text">知</text> <circle cx="450" cy="200" r="50" class="circle" /> <text x="450" y="210" class="text">行</text> <path d="M200,200 Q300,150 400,200" class="line" /> <path d="M200,200 Q300,250 400,200" class="line" /> <polygon points="380,190 400,200 380,210" fill="#1e293b" /> <polygon points="220,190 200,200 220,210" fill="#1e293b" /> </svg> </div> <div class="title">王阳明知行合一哲学精髓</div> <div class="description"> "知行合一"意味着知识与行动不可分割，真正的知识必然体现在行动之中。 </div> </div> </body> </html>3. 小红书数据飞轮系统
效果：
![图片[5]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_4.png)
代码：
<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小红书数据飞轮系统</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <style> body { background-color: #f9fafb; color: #1e293b; font-family: 'Arial', sans-serif; } .container { position: relative; width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; } .svg-container { position: relative; width: 600px; height: 400px; } .circle { fill: #34d399; stroke: #1e293b; stroke-width: 2; } .line { stroke: #1e293b; stroke-width: 2; fill: none; } .text { font-size: 1em; fill: #1e293b; text-anchor: middle; } .description { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1.5em; color: #1e293b; } .title { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 2em; color: #1e293b; } </style> </head> <body class="bg-gray-100 flex items-center justify-center min-h-screen"> <div class="container"> <div class="svg-container"> <svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(150, 150)"> <circle r="50" class="circle"> <animate attributeName="r" values="50;60;50" dur="2s" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite" /> </circle> <text x="0" y="10" class="text">内容创作</text> </g> <g transform="translate(450, 150)"> <circle r="50" class="circle"> <animate attributeName="r" values="50;60;50" dur="2s" repeatCount="indefinite" begin="1s" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite" begin="1s" /> </circle> <text x="0" y="10" class="text">用户参与</text> </g> <g transform="translate(150, 250)"> <circle r="50" class="circle"> <animate attributeName="r" values="50;60;50" dur="2s" repeatCount="indefinite" begin="0.5s" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite" begin="0.5s" /> </circle> <text x="0" y="10" class="text">数据分析</text> </g> <g transform="translate(450, 250)"> <circle r="50" class="circle"> <animate attributeName="r" values="50;60;50" dur="2s" repeatCount="indefinite" begin="1.5s" /> <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite" begin="1.5s" /> </circle> <text x="0" y="10" class="text">算法推荐</text> </g> <path d="M200,150 Q300,100 400,150" class="line"> <animate attributeName="stroke-dasharray" values="0,500;500,0" dur="2s" repeatCount="indefinite" /> </path> <path d="M200,250 Q300,300 400,250" class="line"> <animate attributeName="stroke-dasharray" values="0,500;500,0" dur="2s" repeatCount="indefinite" begin="1s" /> </path> <path d="M150,180 L150,220" class="line"> <animate attributeName="stroke-dasharray" values="0,100;100,0" dur="2s" repeatCount="indefinite" begin="0.5s" /> </path> <path d="M450,180 L450,220" class="line"> <animate attributeName="stroke-dasharray" values="0,100;100,0" dur="2s" repeatCount="indefinite" begin="1.5s" /> </path> <polygon points="380,140 400,150 380,160" fill="#1e293b"> <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="rotate" from="0 400 150" to="360 400 150" dur="2s" repeatCount="indefinite" /> </polygon> <polygon points="380,240 400,250 380,260" fill="#1e293b"> <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" begin="1s" /> <animateTransform attributeName="transform" type="rotate" from="0 400 250" to="360 400 250" dur="2s" repeatCount="indefinite" begin="1s" /> </polygon> <polygon points="140,190 160,200 140,210" fill="#1e293b"> <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" begin="0.5s" /> <animateTransform attributeName="transform" type="rotate" from="0 100 200" to="360 100 200" dur="2s" repeatCount="indefinite" begin="0.5s" /> </polygon> <polygon points="460,190 480,200 460,210" fill="#1e293b"> <animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" begin="1.5s" /> <animateTransform attributeName="transform" type="rotate" from="0 500 200" to="360 500 200" dur="2s" repeatCount="indefinite" begin="1.5s" /> </polygon> </svg> </div> <div class="title">小红书数据飞轮系统</div> <div class="description"> 小红书通过内容创作、用户参与、数据分析和算法推荐形成闭环，不断优化用户体验。 </div> </div> </body> </html>对于创建应用所使用到的Prompt感兴趣的小伙伴可以私信路上侠客。
补充知识：
通义千问代码模式：便捷的代码生成方式
通义千问代码模式是一种能够根据用户描述快速生成代码的功能模式。它基于Qwen2.5 - Coder模型开发，官方称即使不懂编程的用户，也能用大白话让通义AI自动编码生成诸如网站、数据图表和小游戏等应用，并且还预置了一批热门应用，像个人简历、2048小游戏、答案之书等 。
一、基于强大模型的代码生成
通义千问代码模式背后依托的是阿里云自主研发的通义千问大语言模型。通义千问本身具有强大的语言处理能力，可以理解和分析用户输入的自然语言，然后在编程辅助方面，能够根据用户的需求生成相应的代码。例如，它可以在用户输入想要创建一个特定功能的网站（如带有登录注册功能、商品展示功能等）或者编写一个实现特定算法（如排序算法）的代码需求时，生成符合要求的代码片段。这一模式的基础是其代码模型所具有的强大能力，例如其32B尺寸的旗舰代码模型在十余项基准评测中均取得开源最佳成绩，在代码生成、代码推理、代码修复等核心任务性能上表现卓越，能够处理多种编程语言的任务，在40余种编程语言中表现优异，如在McEval基准上取得了所有开闭源模型的最高分等 。
二、便捷的交互体验
通义千问代码模式为用户提供了便捷的交互体验。用户只需打开通义官网，点击代码模式，然后在对话框中用大白话描述需求，通义就会自动生成代码及应用预览。这种交互方式非常适合没有编程基础或者想要快速实现某个应用功能的用户。与传统的编写代码方式相比，不需要用户掌握复杂的编程语言语法、框架知识等，大大降低了代码开发的门槛。例如，一个非技术人员想要创建一个简单的个人博客网站，他只需要描述网站的基本功能，如包含文章发布、评论功能、页面布局大概是什么样等，通义千问代码模式就可能为其生成相应的代码。而且，通义代码模式与通义灵码、AI程序员不同，后两者主要面向资深程序员的深度编码场景，而通义代码模式针对简单的代码和应用生成需求，为用户创建一个动态的窗口，将生成的代码文件直接在网页上渲染成应用，提供了一种全新的交互体验 。
三、多种调用方式与商业应用
调用方式
从调用的技术角度看，可以通过API接口调用通义千问代码模型。例如，可以使用OpenAI Python SDK、DashScope SDK或HTTP接口调用通义千问模型。如果之前使用OpenAI SDK以及HTTP方式调用OpenAI的服务，只需在原有框架下调整API - KEY、base_url、model等参数，就可以直接调用通义千问代码模型。这使得企业或者开发者可以方便地将通义千问代码模式集成到自己的业务流程或者开发环境中。以一家软件开发公司为例，如果他们想要在自己的项目中使用通义千问代码模式来辅助生成代码，开发人员可以根据自己熟悉的接口方式（如DashScope SDK）进行调用，将代码生成功能嵌入到自己的代码编辑器或者开发流程中，提高开发效率。
在实际操作层面，需要满足一些前提条件。比如要参考获取API - KEY，开通百炼服务并获得API - KEY，还要在模型概览中选择需要使用的模型等。不同的调用方式也有不同的注意事项，如在使用DashScope SDK时，要正确配置相关参数，确保与通义千问代码模型的交互正常进行 。
商业应用场景
在商业领域，通义千问代码模式可以应用于多个方面。对于创业公司来说，如果想要快速搭建一个MVP（最小可行产品），可以利用通义千问代码模式快速生成一些基础功能的代码，如生成一个简单的电商平台的产品展示页面、订单处理功能等，从而节省开发时间和成本。对于企业内部的信息化部门，如果需要开发一些内部使用的工具，如员工考勤系统、内部知识库系统等，也可以借助通义千问代码模式来快速生成代码框架，然后再由开发人员进行定制化开发。而且，通义千问代码模式还可以用于教育领域，例如在编程教学中，教师可以利用它来快速生成代码示例，帮助学生更好地理解编程概念和算法实现。
![图片[6]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_5.png)
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入路上侠客的知识星球，一年会员，原价199元，现在只需99元。
![图片[7]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_6.webp)
![图片[8]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_7.webp)
![图片[9]-小白免费使用通义千问代码模式进行快捷开发和创作-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/12/1733504951596_8.webp)
© 版权声明
THE END
