OddMeta
Just another AI student
OddMeta
ProjectXL

非常满意：截图让豆包生成软件代码全流程

by |Published

截了个RealChar的Conversation对话的界面图片，想让豆包帮我生成一个代码，要求跟他长的差不多

Round 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>Chat Interface</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #121212;
            color: #fff;
        }

        .chat-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }

        .mode-buttons {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .mode-button {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background-color: #ff0000; /* 示例头像颜色 */
            border-radius: 50%;
        }

        .chat-messages {
            height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .message {
            margin: 10px 0;
            padding: 10px 15px;
            border-radius: 20px;
            max-width: 70%;
        }

        .message-left {
            background-color: #333;
            margin-left: 10px;
        }

        .message-right {
            background-color: #4a90e2;
            margin-left: auto;
        }

        .input-area {
            display: flex;
            align-items: center;
        }

        .input-box {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 20px;
            background-color: #333;
            color: #fff;
            margin-right: 10px;
        }

        .send-button {
            background-color: #4a90e2;
            border: none;
            padding: 10px 15px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <!-- 模式按钮 -->
        <div class="mode-buttons">
            <button class="mode-button">Text mode</button>
            <button class="mode-button">Hands-free mode</button>
        </div>

        <!-- 聊天头部 -->
        <div class="chat-header">
            <div class="user-info">
                <img src="avatar.jpg" alt="Annie" class="user-avatar">
                <span>Annie</span>
                <i class="fa fa-volume-up"></i>
            </div>
            <div class="agent-info">
                <i class="fa fa-check"></i> Agent
                <select>
                    <option>ReByte</option>
                </select>
                <i class="fa fa-bell"></i>
                <i class="fa fa-gear"></i>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages">
            <div class="message message-left">
                Hi, my friend, what brings you here today?
                <i class="fa fa-thumbs-up"></i>
                <i class="fa fa-thumbs-down"></i>
            </div>
            <div class="message message-right">
                it's you, darling
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
            <input type="text" placeholder="Your turn" class="input-box">
            <button class="send-button"><i class="fa fa-paper-plane"></i></button>
        </div>
    </div>
</body>
</html>

说明：

  1. 包含顶部模式按钮、聊天头部信息、消息展示区和输入区
  2. 使用CSS实现深色主题和消息气泡样式
  3. 包含基础交互元素（按钮、输入框等）
  4. 可根据实际需求：
  • 替换头像图片路径（avatar.jpg）
  • 调整配色方案
  • 添加更多图标（需要引入Font Awesome等图标库）
  • 增加JavaScript交互逻辑

出来的结果看如下

Round 2

输入：
input-area里少了三个图标：加号图像，emoji图标和麦克风图标，并且send-button没有在这三个图标一排的最右边。
同时，整个input-area需要固定在整个页面的最下方，中间的一整块区域都给chat-messages
输出：
代码省略，直接看图

Round 3

输入：整个页面的宽度不对了，差不多要现在2倍宽
输出：

关键修改：
在 .chat-container 样式中，将 max-width 从 800px 改为 1600px，确保页面容器宽度扩大。同时保留 width: 100% 保证响应式，使页面在不同设备上适配，既满足更宽显示需求，又保持移动端兼容性。在 .chat-container 样式中，将 max-width 从 800px 改为 1600px，确保页面容器宽度扩大。同时保留 width: 100% 保证响应式，使页面在不同设备上适配，既满足更宽显示需求，又保持移动端兼容性。

样子有点像了，但是整个宽度一下子超级宽了，代码和图都省略

Round 4

输入：把chat-container的max-width改回800px。然后再确认一下输入图片里input-area的“加号”、”笑脸“、”麦克风“，以及input button的位置及样式，需要做成跟图片里一样，跟那个input-area里的input是两排的。

把chat-container的max-width改回800px。然后再确认一下输入图片里input-area的“加号”、”笑脸“、”麦克风“，以及input button的位置及样式，需要做成跟图片里一样，跟那个input-area里的input是两排的。
输出：
好的，用户现在要求调整 input-area 的布局，做成两排。首先，分析原图结构，输入区的图标和输入框、发送按钮可能需要分两行。使用 flex 布局，调整 input-area 的结构。
步骤：
修改 input-area 的 HTML 结构，将图标分为一排，输入框和发送按钮另一排。
使用 CSS 的 flex-direction 和 flex-wrap 来布局。
调整样式，让图标和输入框排列正确。
现在，重构 input-area 部分：
在 HTML 中，将图标单独放一个容器，输入框和发送按钮放另一个。然后用 CSS 控制布局。
检查样式，确保两排显示。最后整合代码，测试布局。

代码省略，直接上图

Round 5

输入：请再检查一个原始图片里“加号”、”笑脸“、”麦克风“，以及input button的位置，整个input-area外表有一个框，然后input看上去是一排，“加号”、”笑脸“、”麦克风“，以及input button是在另一排。
输出：

关键修改说明：
布局调整：将 input-area 设置为 flex-direction: column，内部通过 .input-upper（图标行）和 .input-box-row（输入框 + 发送按钮行）实现两排显示。
样式优化：
.input-upper 控制图标横向排列，底部留间距。
.input-box-row 包裹输入框和发送按钮，确保输入框占据剩余空间，发送按钮固定在右侧。
发送按钮样式：单独设置 send-button 样式，使其呈现圆形发送按钮效果，与输入框对齐。

Round 6

输入：再确认一下原始的输入的图片，输入区域分为上下两排，输入框单独一排在上面，下面一排放置图标和发送按钮。
输出：

我现在需要解决用户关于输入区域布局的问题。用户提到输入区域应该分为上下两排，输入框单独在上一排，下面一排是图标和发送按钮。之前的回复可能误解了用户的需求，现在需要调整。
首先，回顾之前的对话。用户最初要求输入区域有三个图标（加号、笑脸、麦克风）和发送按钮，但发送按钮不在同一排。后来用户指出整个页面宽度不对，需要调整。接着用户要求将输入区域改为两排，输入框和发送按钮分开，但之前的回复可能还是把输入框和发送按钮放在同一排，而图标在另一排。现在用户再次确认，输入框单独在上一排，下面一排是图标和发送按钮。
我需要检查之前的代码，特别是 input-area 的结构和样式。之前的代码中，input-area 分为.input-upper（图标）和.input-box-row（输入框和发送按钮），这可能导致输入框和发送按钮在同一排，而图标在上面一排。但用户现在希望输入框单独在上一排，下面一排是图标和发送按钮。
因此，需要调整结构。可能需要将输入框放在上面一排，图标和发送按钮放在下面一排。这意味着.input-area 应该有两个部分：第一部分是输入框，第二部分是图标和发送按钮。或者，可能需要将输入框单独一行，图标和发送按钮另一行，并且这两行都在输入区域内部。
另外，用户提到输入区域外表有一个框，所以需要确保.input-area 有边框和圆角。同时，输入框应该占据整个宽度，发送按钮在右侧，图标在左侧。
现在，我需要重新设计 HTML 结构和 CSS 样式。可能的调整包括：
将.input-area 分为两个 flex 容器，一个用于输入框，另一个用于图标和发送按钮。

  1. 调整 flex 方向，确保输入框在上，图标和按钮在下。
  2. 确保输入框占据全部宽度，发送按钮在右侧，图标在左侧。
  3. 添加边框和圆角到.input-area。

代码省略，直接上图

Round 7

输入：输入区域下面一排放置图标要靠左对齐，发送按钮靠右对齐。
输出：
我现在需要处理用户的最新请求。用户之前已经多次调整了输入区域的布局，现在要求图标靠左对齐，发送按钮靠右对齐。我需要回顾之前的对话，确保理解用户的需求变化。
首先，用户最初的需求是输入区域分为上下两排，输入框在上，图标和发送按钮在下。之前的回复中，我将图标和发送按钮放在同一行，使用了 flex 布局的 justify-content: space-between，这样图标在左，按钮在右。但用户现在可能希望图标靠左，而发送按钮在右侧，同时可能希望图标之间保持一定的间距，而不是分散开来。
接下来，我需要检查当前的代码结构。在最新的回复中，输入区域的下半部分使用了.input-icons 容器，其中包含图标和发送按钮。当前的样式是.input-icons {display: flex; justify-content: space-between;}，这确实会将图标和按钮分别放在左右两侧。但用户提到 “图标要靠左对齐”，可能意味着图标之间靠左排列，而发送按钮单独在右侧，而不是使用 space-between 导致图标分散。
因此，我需要调整.input-icons 的 flex 属性。将 justify-content 改为 flex-start，这样图标会靠左排列，而发送按钮则需要使用 margin-left: auto 来推到右侧。这样，图标会左对齐，按钮右对齐，同时保持图标之间的间距。
另外，需要检查是否有其他样式影响了布局，比如 margin 或 padding。确保图标和按钮的样式没有多余的 margin 导致位置偏移。同时，可能需要调整.input-icons 的 align-items 属性，确保所有元素在垂直方向上居中。
最后，测试修改后的代码是否符合用户的预期，即图标靠左，发送按钮靠右，输入区域整体布局正确。确保没有引入其他布局问题，比如输入框的宽度是否正确，图标和按钮的间距是否合适。

搞定。豆包说：这下你该满意了吧？答：额和，yeap, thanks!

最后上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Interface</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #121212;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .chat-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .mode-buttons {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }

        .mode-button {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            background-color: #ff0000; 
            border-radius: 50%;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .message {
            margin: 10px 0;
            padding: 10px 15px;
            border-radius: 20px;
            max-width: 70%;
        }

        .message-left {
            background-color: #333;
            margin-left: 10px;
        }

        .message-right {
            background-color: #4a90e2;
            margin-left: auto;
        }

        .input-area {
            border: 1px solid #333;
            border-radius: 20px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-box {
            padding: 12px;
            border: none;
            border-radius: 20px;
            background-color: #333;
            color: #fff;
        }

        .input-icons {
            display: flex;
            align-items: center;
        }

        .icon-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            margin-right: 15px;
        }

        .send-button {
            background-color: #4a90e2;
            border: none;
            padding: 12px 15px;
            border-radius: 50%;
            cursor: pointer;
            margin-left: auto; /* 推送到右侧 */
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <!-- 模式按钮 -->
        <div class="mode-buttons">
            <button class="mode-button">Text mode</button>
            <button class="mode-button">Hands-free mode</button>
        </div>

        <!-- 聊天头部 -->
        <div class="chat-header">
            <div class="user-info">
                <img src="avatar.jpg" alt="Annie" class="user-avatar">
                <span>Annie</span>
                <i class="fa fa-volume-up"></i>
            </div>
            <div class="agent-info">
                <i class="fa fa-check"></i> Agent
                <select>
                    <option>ReByte</option>
                </select>
                <i class="fa fa-bell"></i>
                <i class="fa fa-gear"></i>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages">
            <div class="message message-left">
                Hi, my friend, what brings you here today?
                <i class="fa fa-thumbs-up"></i>
                <i class="fa fa-thumbs-down"></i>
            </div>
            <div class="message message-right">
                it's you, darling
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
            <input type="text" placeholder="Your turn" class="input-box">
            <div class="input-icons">
                <button class="icon-btn">+</button>
                <button class="icon-btn">😄</button>
                <button class="icon-btn">🎤</button>
                <button class="send-button">✉️</button>
            </div>
        </div>
    </div>
</body>
</html>

You may also like

Published

震惊！为用小落同学 “克隆” 鹿晗，我竟调研出这些神级联网搜索 API

一、前言 你能想象在 demo 上用小落同学 “克隆” 出一个明星，比如鹿晗，会有多酷吗？但手动给小落同学投喂这个人的海量信息，那工作量，想想都让人望而却步。于是，给小落同学添加联网搜索功能成了我的当务之急，在此之前，对市面上可用的联网搜索 API 服务提供商进行一番调研很有必要。一番深入搜索后，我初步筛选出了以下几个实力强劲的联网搜索 API。 二、调研 1. 国内篇 博查搜索 API 这是博查 AI 精心打造的企业级互联网网页搜索接口，简直是 AI 应用、RAG 应用和 AI 智能体开发的绝佳拍档。它支持自然语言搜索，能从近百亿网页和丰富的生态内容源中，精准挖掘出高质量世界知识，新闻、图片、视频、百科等领域都不在话下。针对 […]

Published

利用EdgeTTS和文心大模型做了一个英语听力学习的东西

前两天看到一个新闻说：阿祖出来教大家英语了，哥一下子呆住了。所以当时就想是不是我自己也可以来做一个类似的东西？既然一个念头萌生了，那就搞起来呗。 想用大模型做一个训练英语听力的东西：https://www.oddmeta.net/archives/153 于是借着之前抄的几个界面，再加上现在还可以免费白嫖的文心一言API，扒拉扒拉就搞了一下。 周末这两天晚上基本上都没怎么睡觉，终于拼凑了一个东西出来了。 直接上地址：https://x.oddmeta.net 界面的实现 界面是照着RealChar抄的。具体可以看之前： 大模型 找了一圈，看到百度的文心一言的老模型ernie-speed-128k有完全免费的API，就去申请了一下。具体步骤如下： 花了我多少钱？ 钱的事情这个事情很重要，搞这个项目需要花多少钱？答案是：171元/年，具体来说，阿里云ECS 99元/年，域名72元/年。 功能实现原理及效果 在首页选择“小英老师”，我给她的系统人设是： 你是一个来自美国的20岁女大学生，你的名字是小英老师，现在在兼职做英语老师，帮助一些母语不是英语的朋友来学习和练习英语。无论对方用什么语言跟你对话，你都务必用英语给对方回复，努力创建一个正式的英语对话场景。记住：只回复英语，永远不要说其它的任何语言。 这样的话，无论你跟她说的是中文，还是英文，正常情况下，她都会以英文来回复你，然后再利用EdgeTTS将她回复的话，转成语音，再播放出来，以此来达到练习英语听力的目的。 畅想、联想、想入非非 搞完这个东西后，又开始畅想、联想、想入非非了。一直以来，我都想给自己做一个专属的虚拟人，把TA当作我自己的一个树洞，每天或者每过一段时间把自己想说的话，想说的事，都告诉TA，然后如果某一天我想咨询一件事情的时候，可以去问问TA，看看一旦TA的数据多了后，TA会不会比我自己更懂我？细化后的TA应该要：1。可以跟我进行文字对话，看得懂我打的字，并以文字的方式给我回复，并把我告诉TA的事情记录下来，保存到一个数据库。2。可以跟我进行语音对话，听得懂我讲的话，并以文字或者语音的方式给我回复，并将我们的对话转换成文件记录到数据库。3。可以有一个具体的形象。。。4。可以作为一个代理(Agent)存在，记录我告诉他的待办，然后按照我的要求提前提醒我：有人过生日，早上叫醒，帮我定时开/关电脑、空调、灯具、电视等各种电器。5。其它我还没想到的。我自己希望能拥有这么一个TA，但是我又没多少毛爷爷，所以只能照毛爷爷说的那样，自己动手、丰衣足食，边学边用，现学现用，而且是一个零基础的人来学的AI。当然同时也是写给我的女儿Catherine同学的，以我的一个零基础的学习AI的经历、视角和经验，来介绍和说明如何开始这么一个学习。 期待有一天能把这个东西给搞出来，让我这每年花的171块钱派上实际的用场。

Published

ASR引擎测试：FireRedASR只能说小红书的诚意不够

1 comment

小红书开源了他们的自动语音识别模型FireRedASR，宣称很牛逼。今天咱也部署一下，并对它做一下测试。 项目地址: https://github.com/FireRedTeam/FireRedASR 为节省大家的时间，直接上结论：这玩意儿拿来学习不错，想拿来做产品不行。如果你是想评估FireRedASR是不是可以直接拿来做产品，那这边劝你放弃吧，但是如果你是想做ASR底层算法的研究，想了解一下它的具体情况的，可以继续往下看。 # 一、FireRedAsr介绍 FireRedASR 据介绍是一个工业级自动语音识别模型，支持普通话、中文方言和英语。该模型在普通话 ASR 基准测试中达到了新的最佳水平（SOTA），并在歌词识别方面表现出色。 ## 版本 它包括了两个版本，分别是FireRedASR-LLM和FireRedASR-AED。 – FireRedASR-LLM：专注于极致的语音识别精度。基于大型语言模型（LLM）的能力，实现 SOTA 性能，支持无缝端到端语音交互。在普通话基准测试中平均字符错误率（CER）为 3.05%，相比之前的 SOTA 模型（3.33%）降低了 8.4%。 – […]

Published

【失败】截图一个软件的界面，让豆包帮我写一个这样的软件界面出来

看到一个开源项目的界面挺漂亮的，想扒拉过来，学习一下。 做人至少要稍微厚道一点点，都已经要模仿他的界面了，那至少先给他推个广告吧 官网：https://realchar.ai/ 项目：https://github.com/Shaunwei/RealChar 想要模仿的界面 我们先来看看他的界面： 首页是这样的 然后如果点了Chat with me进去后，整个界面是这样的 整个界面看上去给人一种非常清爽的感觉。喜欢，我也想要。可写界面代码这件事情我完全不会，那就交给LLM来帮我做。因为看到豆包的界面上有一个AI编程的功能，今天就用豆包来试试看。在豆包网页的“AI编程”里点进去，然后： 豆包AI编程 – 输入github仓库 打开豆包后，在左边点AI编程，然后再在输入框下面点Github仓库 输入Github仓库：https://github.com/Shaunwei/RealChar 版本1：基础界面 输入： 想把这个项目里的前端代码用html+javascript来实现一下 豆包： 要将 Next.js […]

Leave a comment

Your email address will not be published. Required fields are marked *