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

想用大模型做一个训练英语听力的东西

1 comment

回首当年，咱要练习听力，就是看美剧，但是现在时代不一样了。 刚才看到一个新闻，说吴彦祖跨界教英语！ 而Catherine同学去年春考英语没考好，由于也拿不到考试的实际结果，不能明确知道到底是哪儿丢了多少分，但是猜测一部分的原因就在于听力那里不知道是开个个小差，还是怎么样，反正大概率就是在那里丢了不少分。 考虑到去年跟Catherine一起学习了一些智能相关的东西，心想是不是刚好可以把这个作为一个课题来练习？等Catherine这个星期五从学校放学回来了，跟她再商量商量。不过，我自己的计划可以先做起来。 同时也是为了庆祝，咱这个公众号终于通过了实名认证，中间的千波万折咱就不提了。 另外，也敬告阿祖，这次别收手了。 想做一个练习听力的功能 – 将Catherine前面做的聊天机器人后台改一下，加个TTS(Text to speech)的功能。 – 给聊天机器人加一个system prompt（系统人设），让TA不管你跟TA用什么语言来说话，统一都只用英语来回复。 – 然后前端在收到后台LMM返回的文字后，再去调用一下后台的TTS引擎，生成音频，再返回给前端，由前端来将其播放出来。 – 其它。。。省略一万字，各种暂时还没想到的功能或流程 跟“阿祖教英语”的区别 互动方式不同：阿祖教英语实际上就是看视频；咱要做一个实时互动的聊天。 问了下deepseek：视频教学和实时互动教学的区别 Deepseek说： […]

Published

关于如何利用小落同学来实现克隆一个数字版本的自己的思考

一、缘起 一直以来，我都有一个梦想，希望能拥有一个数字版的自己。 在此这前，我需要好好认真的去思考一下的是，要实现一个数字版的我自己，应该、可能、也许、大概、似乎可以怎么做？ 这个问题我自己一个人想了很久，但是一直没有想清楚。暂时先用记录一下。 等有时间了，我再来一点点完善。也希望抛砖引玉，有志同道合的人可以一起来探讨。 目前为止，只是花了171块钱（阿里云ECS 99块钱每年，域名72块钱每年），做了一个初始版本的对话机器人：小落同学。 二、子系统分拆 1。后台 1。我告诉大模型关于我自己的一些初始信息：角色设定。2。我每天或者不定期的把发生在自己身上的故事告诉大模型。3。大模型帮我一件件记录下来，并能够自动识别和提取故事中的关键信息，比如日期、地点、人物、事件结果等，并将这些故事进行结构化存储。4。大模型定期（每个月？每个季度）或者不定期的形成阶段性的人格快照，将发生在这段时间内的各种有条理建立时间线、人物关系、关键事件等。5。随着关于我的信息的不断完善，大模型一点点复刻出来的我的身份。 2。前台 1。在小落同学的前端界面展示这个数字版的我，并允许他人来跟这个数字版的我进行对话，让这个数字版的我来代表我自己（提示对方，所有回复的内容仅供参考）。 三、初步设想 1。后台-角色设定的prompt（一次性任务） 系统人设prompt：你是我的数字记忆体和数字分身，将永久存储我的人生故事 2。后台-初始档案子系统（一次性任务） 3。后台-记忆库构建子系统（日常任务） 记录我每天分享的故事、观点、情感、聊天记录、邮件、社交动态。由我自己每天登录到后台，并将今天的事情跟小落同学汇报一下，然后由小落同学将这些事情一件件的总结输出，并保存的记忆中。 4。后台-人格模拟子系统（周期任务） 这个子系统用于： 待思考确认，是否先去研预一下Agentic RAG和Manus，是否可以让Agent来自动完成？ […]

Published

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

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

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%。 – […]

Leave a comment

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