掘金 人工智能 04月02日 10:12
应用实战|借力EdgeOne Pages搭建对话型AI网站
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文分享了如何利用 EdgeOne Pages 和 DeepSeek R1 技术,在七步之内快速构建和部署网站。通过简单的操作,用户可以轻松地从模板创建项目,连接 Git 仓库,并进行部署。文章详细介绍了操作步骤,包括创建项目、选择模板、授权代码托管平台、配置项目、构建部署和预览。最终,用户可以利用 AI 技术快速生成麻将消消乐游戏的 HTML 页面,实现零成本的网站搭建。

✅ 快速入门:EdgeOne Pages 提供了简便的入门流程,用户只需进入控制台,连接 Git 仓库,选择模板并点击部署即可。

✅ 模板选择:文章推荐选择 DeepSeek 模版,方便用户快速搭建项目。

✅ 代码托管:用户可以授权代码托管平台,例如 Gitee,实现代码的自动托管和同步。

✅ 构建部署:平台提供完整的初始化、构建和部署过程,构建完成后即可预览网站。

✅ AI 应用:通过 AI 技术,用户可以快速生成 HTML 页面,例如麻将消消乐游戏,实现网站的快速构建和功能扩展。

引言

在时光的长河中,昔日才子曹植于七步之内吟成千古绝唱,其才华横溢、思维敏捷令人叹为观止。而今,星移斗转,岁月如梭,我们站在了2025年的光辉之下,见证着科技与智慧的交融,迎来了一场场新的变革。

今日,我不以诗词争辉,却欲效仿先贤,在区区七步之间,借力于现代科技之巅峰——EdgeOne + EdgeOne Pages + DeepSeek R1,完成一场深度对话。

这不仅是对古人智慧的一种致敬,更是展现了人类文明不断追求进步、超越自我的精神风貌。让我通过AI技术构建起心灵沟通的桥梁,将世界紧密相连。

本文将以DeepSeek R1 为模版,借力沿技术为核心驱动力EdgeOne,在EdgeOne Pages上面部署前端开发和部署平台,为我们开发者快速构建、部署静态站点和无服务器应用。

实践

EdgeOne Pages 的入门非常简单!只需进入 Pages 控制台,连接您的 Git 仓库,选择我们的模板或您自己的 Git 项目,然后点击部署。

官方网址:console.cloud.tencent.com/edgeone/

操作详细文档直通车:edgeone.cloud.tencent.com/

步骤1 登录到EdgeOne控制台创建项目

1、在浏览器地址栏输入控制台地址(console.cloud.tencent.com/edgeone/);(…

2、找到Pages,目前Pages还在Beta测试版;(参见2)

3、默认情况下,Pages下面是没有项目的,点击“创建项目”即可;(参见3)

步骤2 创建项目后直接选择DeepSeek模版

1、点击“创建项目”,跳转到创建项目页面,此页面包含选择Git仓库选择模版两个模块,直接在选择模版中选择如图所示的 DeepSeek-R1 for Edge 即可。(参见4)

步骤3 授权代码托管平台并配置项目

1、选择完成模版后,选择代码托管平台,此处我选择了Gitee作为本次演示的代码托管平台(参见5),由于我之前并没有给予授权,所以本次需要先授权,授权完成之后可以自动将代码托管过去。

2、我此处选择了默认的配置,仓库实际选择了“公共”仓库,实际截图时是私有。(参见6)

步骤4 执行创建部署并初始化项目

1、一切配置信息都准备完成后,点击“立即创建”按钮(参见9),平台开始一系列的初始化动作,例如将模版同步克隆到代码托管平台(参见10)。

步骤5 构建部署项目

1、初始化完成之后,跳转到构建部署页面,可以在页面看到完整的初始化、构建部署的过程(参见11)。在初始化完成之后,我们可以去代码托管库确认下是否已经有了代码(参见12)。

步骤6 部署预览

1、构建部署的速度还是相当的快,当页面撒花🎉🎉🎉欢迎时,便是成功之日。(参见13)

2、部署完成之后,将页面向上滑动一下,来到预览按钮处(参见14),点击预览按钮就可以访问我们成功部署的页面地址啦。(参见15)

3、演示时使用的是临时域名,但也足够我玩耍的了。如果你有自己的域名,也可以配置中配置上属于自己的域名,配置好之后才真正属于你的。

在 Pages 中,域名管理是确保您的网站能够被用户顺利访问的重要环节。Pages 提供了多种域名,包括项目域名,部署域名和自定义域名。默认情况下,您的项目会获得一个基于 Pages 平台的子域名,方便您快速访问和分享。

步骤7 实践AI对话网站

1、在前面步骤完成之后,我们访问地址就可以在线快乐了。例如我输入一段文字“你好,请帮我生成一个麻将消消乐游戏的html页面”,响应速度很快出来了内容,内容包括参考信息、思考过程以及最终的答案

2、在代码完成之后,还给出了详细的游戏规则,真是包容到了极致。

这个实现包含以下功能:

    麻将牌消消乐核心玩法三张相同牌匹配消除机制辅助功能:界面设计:指南针和常见牌型:周奖励机制:

要运行这个游戏,请将所有代码保存为.html文件,并在现代浏览器中打开。你可以通过点击任意三张相同的牌来消除它们,达成目标即可得分。

注意事项:

    游戏逻辑需要根据实际情况进一步完善可以添加更多麻将牌类型和图案增加音效和更复杂的动画效果支持保存游戏进度

附录上最终效果图

将代码拷贝到网页中就可以及时行乐啦。

附录上完整的代码

代码均为搭建后产生的,可以将其拷贝到HTML文件中,直接打开即可体验消消乐。

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>麻将消消乐</title>    <style>      body {        font-family: '毛笔字体', Arial, sans-serif;        background-color: #E6E6FA;      }      .game-container {        width: 800px;        margin: 20px auto;        padding: 20px;        background-color: white;        border-radius: 10px;        box-shadow: 0 0 10px rgba(0,0,0,0.1);      }      .game-panel {        display: grid;        grid-template-columns: repeat(8, 1fr);        gap: 10px;        margin-bottom: 20px;        background-color: #FFE4C4;        padding: 10px;        border-radius: 5px;      }      .mahjong-tile {        width: 60px;        height: 80px;        background-color: #BEBEBE;        display: flex;        align-items: center;        justify-content: center;        font-size: 12px;        cursor: pointer;        box-shadow: 0 2px 5px rgba(0,0,0,0.2);      }      .selected {        background-color: #FFD700;      }      .score-board {        text-align: center;        margin-bottom: 20px;      }      .menu-buttons {        margin-top: 20px;        display: flex;        gap: 10px;        justify-content: center;      }      button {        padding: 10px 20px;        font-size: 16px;        cursor: pointer;        background-color: #4CAF50;        color: white;        border: none;        border-radius: 5px;      }      .hand-area {        display: flex;        gap: 10px;        margin-bottom: 20px;      }    </style>  </head>  <body>    <div class="game-container">      <h1>麻将消消乐</h1>      <div class="score-board">        <p>得分:150</p>        <p>剩余牌数:24</p>      </div>      <div class="hand-area">        <div class="mahjong-tile"></div>        <div class="mahjong-tile"></div>        <div class="mahjong-tile"></div>      </div>      <div class="game-panel" id="board"></div>      <div class="menu-buttons">        <button onclick="removeThree()">移除三张</button>        <button onclick="useBomb()">使用炸彈</button>        <button onclick="shuffleBoard()">随机打乱</button>        <button onclick="viewRewards()">查看奖励</button>      </div>      <h3>每周奖励领取:</h3>      <p id="weekly-reward">已累计欢乐豆:12345</p>    </div>    <script>      let selectedTiles = [];      const mahjongTiles = ['东', '南', '西', '北', '中', '发', '白'];      const board = document.getElementById('board');            function initGame() {        const tiles = [];        for (let i = 0; i < 32; i++) {          tiles.push(mahjongTiles[i % 7]);        }        shuffle(tiles);        tiles.forEach(tile => {        const tileElement = createTile(tile);                board.appendChild(tileElement);            });        }                function createTile(value) {            const tile = document.createElement('div');            tile.className = 'mahjong-tile';            tile.textContent = value;            tile.onclick = () => handleTileClick(tile);            return tile;        }                function handleTileClick(tile) {            if (selectedTiles.length >= 3) {                selectedTiles.forEach(t => t.classList.remove('selected'));                selectedTiles = [];            }                        if (!selectedTiles.includes(tile)) {                selectedTiles.push(tile);                tile.classList.add('selected');                                                if (selectedTiles.length === 3) {                    const values = selectedTiles.map(t => t.textContent);                    if (values.every(v => v === values[0])) {                        clearSelected();                        updateScore(150);                    }                }            }        }                function updateScore(value) {            document.querySelector('.score-board p:first-child').textContent =                 `积分:${parseInt(document.querySelector('.score-board p:first-child').textContent.split(' ')[1]) + value}`;                        selectedTiles.forEach(t => t.remove());            initGame();        }                function shuffle(array) {            for (let i = array.length - 1; i > 0; i--) {                const j = Math.floor(Math.random() * (i + 1));                [array[i], array[j]] = [array[j], array[i]];            }        }                function clearSelected() {            selectedTiles.forEach(t => t.classList.remove('selected'));            selectedTiles = [];        }                function removeThree() {            const tiles = board.getElementsByClassName('mahjong-tile');            for (let i = 0; i < 3; i++) {                if (tiles[i]) tiles[i].remove();            }            initGame();        }                function useBomb() {            document.querySelectorAll('. mahjong-tile:contains("中")').forEach(t => t.remove());            initGame();        }                function shuffleBoard() {            const tiles = Array.from(board.children);            shuffle(tiles);            board.innerHTML = '';            tiles.forEach(tile => board.appendChild(tile));        }                function viewRewards() {            alert(`当前累计欢乐豆:${parseInt(document.getElementById('weekly-reward').textContent.split(' ')[2])}`);        }        initGame();    </script></body></html>

总结

时代的变化,技术的革新,白驹过隙之间便搞定搭建网站,可谓是零成本参与其中。总的说来,其实很简单,在EdgeOne控制台选择模型模版,填写项目信息和代码托管平台信息,直接构建部署即可。总结下就是三步:

    1 选平台选模型模版2 填写项目信息3 构建部署

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

EdgeOne DeepSeek R1 网站部署 AI
相关文章