AI 助理
备案控制台
开发者社区 通义大模型 文章 正文

用 Qwen2.5-Coder 开发一个网页应用，完全0基础，已部署上线，代码开源！

2024-12-11 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
视觉智能开放平台，图像资源包5000点
NLP自然语言处理_高级版，每接口累计50万次
视觉智能开放平台，分割抠图1万点
简介： 利用Qwen2.5-Coder成功开发了一个简洁实用的网页应用，该应用能够在浏览器Tab标题中显示北京时间，并在页面中集成了实时时间显示和番茄时钟功能。通过Qwen2.5-Coder的强大代码生成能力，从零基础开始，仅需简单提示便完成了HTML、CSS和JavaScript的编写。经过几次优化调整，最终实现了美观且功能完善的网页应用，并顺利部署至Vercel平台，满足了作者在全屏模式下查看时间的需求。

大家好，我是章北海

看到 Qwen2.5-Coder 非常强悍，就想测试一下，能否 0 基础开发一个网页应用。

我是 Mac💻用户，浏览器全屏模式下看时间需要鼠标上划唤出菜单栏，容易打断我的专注模式🧘。

所以就想开发一个网页，能在 Tab 标题中显示北京时间，另外，页面内部也想加一个番茄🍅时钟。

试了一下，果然很强，效果如下⬇️，完美满足我的需求，然后上线部署到 vercel 就行了：

上线后，开网页不影响我看时间！

完整代码：https://github.com/tjxj/whatstime

Cursor + Qwen2.5-Coder

本文我测试用到的是 Qwen2.5-Coder-32B-Instruct，它基于 Qwen2.5 开发的代码特定大语言模型。该模型通过 5.5 万亿 tokens 的训练，在代码生成、代码推理和代码修复方面都取得了显著提升。它是当前最先进的开源代码语言模型，编码能力可与 GPT-4 相媲美。

阿里自己也有一个编程辅助工具叫通义灵码，在 VSCode 中安装插件即可，也很棒，下次再测试吧。

通义灵码，是基于通义大模型的智能编程辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云的云服务使用场景调优，助力开发者高效、流畅地编码。

最近经常用 Cursor，所以就直接在 Cursor 中调用 Qwen2.5-Coder-32B-Instruct 来帮我开发这个网页应用。

“开发”过程

整个过程，代码全部由Qwen2.5-Coder生成！

prompt如下：你是前端开发工程师，我想实现一个网页应用，tab页可以显示具体的时间，页面正文部分显示具体的北京时间、年月日，还可以设定番茄时钟。

它给我了三段代码

1. HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="tabs">
        <button class="tab-button" onclick="showTab('time')">时间</button>
        <button class="tab-button" onclick="showTab('pomodoro')">番茄时钟</button>
    </div>
    <div id="time" class="tab-content">
        <h1 id="current-time"></h1>
        <h2 id="current-date"></h2>
    </div>
    <div id="pomodoro" class="tab-content" style="display:none;">
        <h1>番茄时钟</h1>
        <div id="pomodoro-timer">25:00</div>
        <button id="start-pomodoro">开始</button>
        <button id="stop-pomodoro">停止</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

/* styles.css */
body {
   
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

#tabs {
   
    margin-top: 20px;
}

.tab-button {
   
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
}

.tab-content {
   
    margin-top: 20px;
    display: none;
}

.tab-content.active {
   
    display: block;
}

3. JavaScript逻辑

// script.js 处理时间显示和番茄时钟的功能

// 显示当前时间
function updateTime() {
   
    const now = new Date();
    const timeString = now.toLocaleTimeString('zh-CN', {
    hour12: false });
    const dateString = now.toLocaleDateString('zh-CN', {
    year: 'numeric', month: 'long', day: 'numeric' });
    document.getElementById('current-time').textContent = timeString;
    document.getElementById('current-date').textContent = dateString;
}

// 切换标签页
function showTab(tabName) {
   
    const tabs = document.getElementsByClassName('tab-content');
    for (let i = 0; i < tabs.length; i++) {
   
        tabs[i].style.display = 'none';
    }
    document.getElementById(tabName).style.display = 'block';
}

// 番茄时钟逻辑
let pomodoroInterval;
let pomodoroTime = 25 * 60; // 25分钟

function startPomodoro() {
   
    pomodoroInterval = setInterval(() => {
   
        pomodoroTime--;
        updatePomodoroTimer();
        if (pomodoroTime <= 0) {
   
            clearInterval(pomodoroInterval);
            alert('番茄时钟结束！');
        }
    }, 1000);
}

function stopPomodoro() {
   
    clearInterval(pomodoroInterval);
}

function updatePomodoroTimer() {
   
    const minutes = Math.floor(pomodoroTime / 60);
    const seconds = pomodoroTime % 60;
    document.getElementById('pomodoro-timer').textContent = `${
     minutes.toString().padStart(2, '0')}:${
     seconds.toString().padStart(2, '0')}`;
}

// 初始化
setInterval(updateTime, 1000);
updateTime();
document.getElementById('start-pomodoro').addEventListener('click', startPomodoro);
document.getElementById('stop-pomodoro').addEventListener('click', stopPomodoro);

如果连这些脚本干什么的都不知道，也可以问Qwen2.5-Coder

  1. HTML: 创建了两个标签页，一个用于显示当前时间和日期，另一个用于番茄时钟。
  2. CSS: 添加了一些基本样式，使页面看起来更整洁。
  3. JavaScript: 实现了时间的实时更新、标签页的切换以及番茄时钟的计时功能。

调整、美化

预览一下，效果不太理想，可以根据第一版情况让Qwen2.5-Coder继续修改

prompt如下：有两个需要调整的点：1、Tab 的title显示应该是北京时间，十分秒，动态。2、页面内时间和番茄时钟同时显示，不需要点击。另外，主题不够美观，请使用最先进、最美观的形式展现。

然后Qwen2.5-Coder给出了调整后的代码

首先是主HTML文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="page-title">北京时间</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="card time-display">
            <div class="time-wrapper">
                <h1 class="current-time" id="current-time"></h1>
                <p class="current-date" id="current-date"></p>
            </div>
        </div>

        <div class="card pomodoro-container">
            <h2>番茄时钟</h2>
            <div class="timer-display" id="pomodoro-timer">25:00</div>
            <div class="button-group">
                <button id="start-pomodoro">开始</button>
                <button id="pause-pomodoro">暂停</button>
                <button id="reset-pomodoro" class="reset-btn">重置</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS文件：

:root {
    --primary-color: #2196f3;
    --background-color: #f5f5f5;
    --card-background: #ffffff;
    --text-color: #333333;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: var(--card-background);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.card:hover {
    transform: translateY(-5px);
}

.time-display {
    text-align: center;
}

.time-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.current-time {
    font-size: 3.5rem;
    font-weight: 300;
    margin: 0;
    color: var(--primary-color);
}

.current-date {
    font-size: 1.5rem;
    color: #666;
    margin: 10px 0;
}

.pomodoro-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timer-display {
    font-size: 4rem;
    font-weight: 300;
    margin: 20px 0;
    color: var(--primary-color);
}

.button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #1976d2;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

.reset-btn {
    background-color: #ff5722;
}

.reset-btn:hover {
    background-color: #f4511e;
}

JavaScript文件：

// 更新标题和时间显示
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('zh-CN', { hour12: false });
    const dateString = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
    });

    // 更新页面标题
    document.title = `北京时间 ${timeString}`;

    // 更新页面显示
    document.getElementById('current-time').textContent = timeString;
    document.getElementById('current-date').textContent = dateString;
}

// 番茄时钟相关变量
let pomodoroTime = 25 * 60;
let pomodoroInterval;
let isRunning = false;

// 番茄时钟功能
function updatePomodoroTimer() {
    const minutes = Math.floor(pomodoroTime / 60);
    const seconds = pomodoroTime % 60;
    document.getElementById('pomodoro-timer').textContent = 
        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

function startPomodoro() {
    if (!isRunning) {
        isRunning = true;
        pomodoroInterval = setInterval(() => {
            if (pomodoroTime > 0) {
                pomodoroTime--;
                updatePomodoroTimer();
            } else {
                clearInterval(pomodoroInterval);
                isRunning = false;
                alert('番茄时钟完成！');
            }
        }, 1000);
    }
}

function pausePomodoro() {
    clearInterval(pomodoroInterval);
    isRunning = false;
}

function resetPomodoro() {
    clearInterval(pomodoroInterval);
    isRunning = false;
    pomodoroTime = 25 * 60;
    updatePomodoroTimer();
}

// 事件监听
document.getElementById('start-pomodoro').addEventListener('click', startPomodoro);
document.getElementById('pause-pomodoro').addEventListener('click', pausePomodoro);
document.getElementById('reset-pomodoro').addEventListener('click', resetPomodoro);

// 初始化
setInterval(updateTime, 1000);
updateTime();
updatePomodoroTimer();

这个更新后的版本有以下改进：

  1. 标题动态更新：浏览器标签页会实时显示北京时间
  2. 现代化设计：
    • 使用卡片式布局
    • 添加优雅的阴影效果
    • 使用现代化的颜色方案
    • 添加平滑的动画效果
  3. 响应式布局：
    • 使用CSS Grid实现自适应布局
    • 在不同屏幕尺寸下都能很好地展示
  4. 功能完善：
    • 时间和番茄时钟同时显示
    • 番茄时钟增加了暂停和重置功能
    • 显示完整的日期信息，包括星期
  5. 交互优化：
    • 按钮添加悬停效果
    • 卡片添加轻微的悬停动画
    • 更清晰的视觉层次

部署上线

Qwen2.5-Coder回复如下

当然可以！将你的项目部署到 Vercel 并使用 Cloudflare 作为域名提供商，可以按照以下步骤进行操作。

1. 准备项目文件

确保你的项目文件结构如下：

my-tomato-clock/
├── index.html
├── styles.css
└── script.js

2. 创建 Vercel 账户并安装 Vercel CLI

如果你还没有 Vercel 账户，先注册一个：Vercel 注册页面

安装 Vercel CLI：

npm install -g vercel

3. 部署项目到 Vercel

  1. 打开终端并导航到你的项目目录：

     cd path/to/my-tomato-clock

  2. 使用 Vercel CLI 部署项目：

     vercel

  3. 按照提示操作：

    • 选择项目目录（默认即可）
    • 输入项目名称（可选）
    • 选择框架（选择 Other）
    • 选择是否公开项目（可选）
    • 选择是否自动部署（可选）

  4. 部署完成后，Vercel 会提供一个临时的 URL，例如 https://my-tomato-clock.vercel.app。

4. 配置 Cloudflare

  1. 登录到你的 Cloudflare 账户：Cloudflare 登录页面

  2. 添加域名：

    • 点击 Add Site 按钮。
    • 输入你的域名，然后点击 Add Site。

  3. 获取 Cloudflare 的 DNS 记录：

    • 在 Cloudflare 仪表盘中，进入你的域名页面。
    • 点击 DNS 标签。
    • 记录 Cloudflare 提供的两个 DNS 服务器地址（例如 ns1.cloudflare.com 和 ns2.cloudflare.com）。

  4. 更新域名注册商的 DNS 设置：

    • 登录到你的域名注册商账户。
    • 找到 DNS 设置或名称服务器设置。
    • 将域名的名称服务器更改为 Cloudflare 提供的两个地址。
    • 保存更改。

  5. 等待 DNS 更改生效（通常需要几分钟到几小时）。

5. 在 Cloudflare 中配置 Vercel 的域名

  1. 在 Cloudflare 仪表盘中，进入你的域名页面。
  2. 点击 Pages 标签。
  3. 点击 Create a project 按钮。
  4. 选择 Custom domain。
  5. 输入你的域名（例如 mytomatoclock.com）。
  6. 点击 Next。
  7. 选择 Custom build。
  8. 输入 Vercel 提供的 URL（例如 https://my-tomato-clock.vercel.app）。
  9. 点击 Next。
  10. 点击 Deploy。

6. 配置 SSL 证书

  1. 在 Cloudflare 仪表盘中，进入你的域名页面。
  2. 点击 SSL/TLS 标签。
  3. 确保 SSL 模式设置为 Flexible 或 Full（推荐 Full）。
  4. 点击 Save。

7. 验证部署

  1. 等待 DNS 更改生效。
  2. 打开你的域名（例如 https://mytomatoclock.com），确保一切正常。

8. 自动化部署（可选）

如果你希望每次代码更新后自动部署到 Vercel，可以配置 GitHub 集成：

  1. 在 Vercel 仪表盘中，进入你的项目页面。
  2. 点击 Git Integration。
  3. 选择你的 GitHub 账户和仓库。
  4. 按照提示完成集成。

这样，每次你推送代码到 GitHub，Vercel 会自动部署你的项目。

最终效果

手动调整了一两个细节，按照提示，上线后如下

打开N多网页，也不会影响我愉快的看时间

使用 Qwen Coder，你可以显著降低开发成本，通过自动化代码生成快速搭建应用框架，将更多资源投入到核心功能开发。Qwen Coder 支持多种编程语言和框架，确保技术栈选择灵活。同时，它能根据具体需求生成定制化代码，轻松调整和优化，确保应用程序完全符合你的期望。

文章标签：
云解析DNS
域名
前端开发
网络协议
JavaScript
网络安全
自然语言处理
玩机器学习的章北海-13621
目录
相关文章
ModelScope运营小助手
|
7月前
|
机器学习/深度学习 编解码 Shell
Open-Sora，高效复现类Sora视频生成方案开源！魔搭社区最佳实践教程来啦！
近期，HPC-AI Tech团队在GitHub上正式公开了Open-Sora项目
ModelScope运营小助手
1010 2
ModelScope运营小助手
|
7月前
|
人工智能 JSON 搜索推荐
社区供稿 | GLM-4适配ModelScope-Agent最佳实践
GLM-4是由智谱 AI 发布的新一代基座大模型。
ModelScope运营小助手
615 0
CrissChan
|
分布式计算 测试技术 API
为集成LLM到测试平台提供更便捷的方式：为讯飞的LLM星火创建接入LangChain类（全部源代码）
为集成LLM到测试平台提供更便捷的方式：为讯飞的LLM星火创建接入LangChain类（全部源代码）
CrissChan
673 0
蚝油菜花
|
2天前
|
机器学习/深度学习 人工智能 测试技术
O1-CODER：北交大推出的O1代码版开源项目，专注于编码任务
O1-CODER是由北京交通大学研究团队推出的开源项目，专注于编码任务。该项目结合强化学习和蒙特卡洛树搜索技术，提升模型的System-2思维能力，旨在生成更高效、逻辑性更强的代码。
蚝油菜花
48 24
O1-CODER：北交大推出的O1代码版开源项目，专注于编码任务
六月的雨在钉钉
|
4天前
|
前端开发 Java 测试技术
基于Qwen2.5-Coder 快速搭建应用管理系统
本文介绍了如何利用Qwen2.5-Coder快速搭建一个应用管理系统。通过访问ModelScope通义千问Qwen模型库，选择Qwen2.5-Coder模型，生成Spring Boot项目代码包，并逐步解决项目运行中遇到的问题，如Java版本不兼容等。文章还展示了如何优化用户管理页面的功能和样式，最终实现了从零代码到完整应用的搭建过程，提供了良好的用户体验和开发效率。附带的可运行代码链接为：[https://gitee.com/null_096_1927/demo](https://gitee.com/null_096_1927/demo)。
六月的雨在钉钉
124 7
基于Qwen2.5-Coder 快速搭建应用管理系统
阿里云云原生
|
27天前
|
人工智能 自然语言处理 前端开发
用通义灵码，从 0 开始打造一个完整APP，无需编程经验就可以完成
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI，再配合简单易懂的方法，只要你会打字，就能真正做出一个完整的应用。本教程完全免费，而且为大家准备了 100 个降噪蓝牙耳机，送给前 100 个完成的粉丝。获奖的方式非常简单，只要你跟着教程完成第一课的内容就能获得。
阿里云云原生
10390 16
魔搭ModelScope社区小助手
|
6天前
|
人工智能 API 语音技术
开发者福利，魔搭推出免费模型推理API，注册就送每日2000次调用！
今天，魔搭社区开放了免费的开源模型推理API，仅需使用魔搭的SDK Token，就可以通过简单的API请求探索各种强大的开源模型的使用。
魔搭ModelScope社区小助手
28 9
阿里云智能-计算巢-琥颐
|
15天前
|
人工智能 JSON 自然语言处理
AppFlow全面支持Qwen2.5开源版无代码调用
Qwen2.5是阿里云推出的大型语言模型，无需编码即可快速体验。该模型基于最新大规模数据集训练，支持超29种语言，显著提升了知识量、编码及数学能力，特别是在指令遵循、长文本生成、结构化数据理解和生成等方面。通过AppFlow，Qwen2.5可轻松集成至钉钉机器人等应用，实现智能化交互。
阿里云智能-计算巢-琥颐
42 4
彩虹翼匠
|
3月前
|
弹性计算 网络协议 API
原生Claude3免魔法本地轻松上手，这3步你必须要知道
本文详细介绍了如何在阿里云ECS上部署LobeChat，并通过Cloudflare实现Claude3 API的代理访问。首先准备ECS、Claude3 API密钥及域名，接着通过Docker部署LobeChat，并配置相关环境变量。然后，在Cloudflare上创建站点并部署API代理，最后通过SSH端口映射在本地访问LobeChat。文中提供了具体步骤与示例代码，帮助读者顺利完成部署，体验高效便捷的AI聊天功能。
彩虹翼匠
229 2
阿里云
|
4月前
|
人工智能 自然语言处理 API
阿里云百炼上线FLUX文生图模型中文优化版，可免费调用！
阿里云百炼上线FLUX文生图模型中文优化版，可免费调用！
阿里云
490 6

通义大模型

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    maven配置阿里云镜像源
  • 3
    ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
  • 4
    【完全免费】VS Code 最好用的 12 款 AI 代码提示插件！！！
  • 5
    Qwen模型角色扮演最佳实践
  • 6
    Cursor + qwen2.5-coder 32b 的配置方式
  • 7
    2023云栖大会 | 阿里云发布通义千问2.0
  • 8
    通义千问API：让大模型使用各种工具
  • 9
    深入剖析 Qwen2.5 - 32B 模型在 VLLM 上的单机三卡部署与运行
  • 10
    【项目实战】通过LLaMaFactory+Qwen2-VL-2B微调一个多模态医疗大模型
  • 1
    百度 SEO：不是玄学，是科学与艺术的 “恋爱”
    31
  • 2
    用 Qwen2.5-Coder 开发一个网页应用，完全0基础，已部署上线，代码开源！
    50
  • 3
    基于agentscope的多智能体游戏场景-骗子酒馆
    61
  • 4
    Qwen模型角色扮演最佳实践
    192
  • 5
    通义千问 Qwen 系列的 Agent 方向探索
    31
  • 6
    Qwen2-VL微调实战：LaTex公式OCR识别任务（完整代码）
    74
  • 7
    基于通义千问32B及RAG技术的CACA指南诊疗规范平台落地实践
    40
  • 8
    【项目实战】通过LLaMaFactory+Qwen2-VL-2B微调一个多模态医疗大模型
    161
  • 9
    前端自动化测试
    35
  • 10
    智能化AI工具-语言翻译与本地化
    43

    • 相关课程

    更多
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 阿里云百炼，手把手教你如何构建企业大模型应用服务
  • ModelScope社区Library技术架构介绍
  • 数据管理 DMS产品介绍及Data Copilot演示教程智能助手 DMS Data Copilot简介
  • 基于通义灵码实现高效 AI 编码
  • 云原生AI套件：五分钟微调宝可梦风格StableDiffusion

    • 相关电子书

    更多
  • 魔搭・平台工程框架介绍
  • 开发者专场-张暘 深度解密基于 Serverless下 构建的工具家族 最终版
  • 使用TensorFlow搭建智能开发系统 自动生成App U

    • 相关实验场景

    更多
  • 如何快速体验调用通义大模型
  • 函数计算部署PuLID for FLUX人像写真实现换脸效果
  • 在SAE控制台极速部署个人LLM效能工具
  • SAE 极速部署专属 AI 证件照神器
  • 以电商场景为例搭建AI语义搜索应用
  • 函数计算入门-HelloWorld应用开发
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解