「豆包Marscode体验官」：我的私人小说画师，一码在手，插图我有作为一名热衷于技术与艺术融合的创作者，我有幸成为豆包

我正在参加「豆包MarsCode初体验」征文活动，链接：豆包Marscode。最近，字节跳动的人工智能编程助手工具豆包MarsCode横空出世，当我在看到这则消息的时候，作为一名热衷于技术与艺术融合的创作者，我有幸成为豆包MarsCode的体验官，并使用它做了一个小说插图生成的demo，你给它一段小说片段，它会根据你的片段生成一张图片。

那么首先我们先来看看这款编程助手的功能

我是在vscode里下载的一个插件，直接搜索marscode就可以了

让我们来看看它的功能

1. 智能代码补全

MarsCode的核心功能之一是智能代码补全。它利用深度学习技术分析代码上下文，预测并推荐代码片段，极大地减少了程序员的打字量，加速了代码编写过程。

尽管它刚开始可能不太能理解我的意思，，但稍微调教调教就行了

2. 代码生成

除了补全已有代码，MarsCode还具备强大的代码生成能力。无论是函数、类还是完整的文件，只需简单的指令，MarsCode即可自动生成。

这个代码生成还是挺准确的

3. 注释与解释

面对复杂的代码结构，MarsCode能够自动生成清晰的注释，可以帮助开发者更好地理解代码逻辑。只需要在你想要生成注释的代码上边或者后面打上注释的符号，它就会自动给你生成注释，如下图：

4. 单测生成

为了确保代码质量，MarsCode还提供了自动化的单元测试生成功能。在编码阶段即可进行初步的代码验证，及时发现并修正潜在的错误，大大提升了代码的健壮性，减少了后期调试的时间成本。

5. 缺陷修复

MarsCode能够智能识别代码中的潜在错误和不规范编程实践，并给出修改建议。这一功能如同一位经验丰富的同事，在你身旁随时提供指导，帮助你避免常见的编程陷阱，提升代码的整体质量。

6. AI问答

内置的AI问答系统使得MarsCode成为了开发者的朋友和顾问。无论是遇到复杂的技术难题还是简单的概念疑问，MarsCode都能提供即时、准确的答案，促进了知识的快速共享和问题的高效解决。

7. 广泛兼容性与多语言支持

MarsCode的兼容性极强，无论你是Windows、macOS还是Linux用户，无论你偏爱Visual Studio Code还是JetBrains系列IDE，MarsCode都能完美适配。更重要的是，它支持上百种编程语言，几乎涵盖了所有开发场景，满足了不同领域、不同层次开发者的需求。

项目的构想与计划

在开始之前，我首先明确了目标：创建一个能够根据小说文本自动生成插图的系统。你给它一段小说片段，它会根据你的片段生成一张图片。豆包MarsCode作为我的助手，在这个项目中扮演了至关重要的角色，从代码编写到逻辑优化，它都提供了极大的帮助。

前端界面设计

我选择使用HTML和JavaScript来构建前端界面。下面是我设计的简单对话框界面代码，它允许用户输入文本，然后调用后端API生成相应的插图。

<!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="./personal.css">
</head>
<body>
<div class="bot-container">
    <div class="chatbox" id="messages">
        <!-- Messages will be added here dynamically -->
    </div>
    <div class="input-button-group">
        <textarea name="inputText" id="bot-input" rows="3" placeholder="在这里输入文字..." required></textarea>
        <button id="btn">发送</button>
    </div>
</div>
<script>
    const inp = document.getElementById('bot-input');
    const btn = document.getElementById('btn');
    const messagesDiv = document.getElementById('messages');

    btn.addEventListener('click', function() {
        if (inp.value.trim() === '') {
            alert('请输入一些文本！');
            return;
        }

        // 显示用户的消息
        const userMessageDiv = document.createElement('div');
        userMessageDiv.className = 'message user-message';
        userMessageDiv.textContent = inp.value;
        messagesDiv.appendChild(userMessageDiv);

        // 清空输入框
        inp.value = '';

        const data = {
            text: inp.value
        };

        fetch("http://127.0.0.1:3000/img", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data && data.url) {
                // 显示助手的消息（图像）
                const assistantMessageDiv = document.createElement('div');
                assistantMessageDiv.className = 'message assistant-message';
                assistantMessageDiv.innerHTML = `<img src="${data.url}" alt="Generated Image">`;
                messagesDiv.appendChild(assistantMessageDiv);
            } else {
                alert('无法获取图片，请重试！');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('请求失败，请检查您的网络连接或服务器状态！');
        });
    });
</script>
</body>
</html>

这段代码构建了一个简洁的用户界面，用户可以通过点击“发送”按钮提交小说片段，系统则会异步请求后端API，获取并展示生成的插图。

后端API搭建

后端部分，我选择了Koa.js作为服务器框架，配合OpenAI的DALL·E模型来生成插图。以下是后端代码的核心部分：

import Koa from 'koa'
import Router from 'koa-router'
import cors from '@koa/cors'
import { bodyParser } from '@koa/bodyparser'
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: 'YOUR_API_KEY',
    baseURL: 'https://api.302.ai/v1'
})

const app = new Koa()
const router = new Router()

app.use(bodyParser())
app.use(cors())

router.post('/img', async (ctx) => {
    try {
        let { text } = ctx.request.body
        console.log(text);
        const prompt = `你是一个小说插图师，请你为小说片段"${text}"设计插图，符合小说的内容，主题，风格，情感，场景，人物。`;
        const response = await client.images.generate({
            model: 'dall-e-3',
            prompt,
            n: 1
        })
        ctx.body = {
            status: 200,
            url: response.data[0].url
        }
        console.log(response.data[0].url);
    } catch (error) {
        ctx.body = {
            status: 500,
            msg: '服务器错误'
        }
    }
})

app.use(router.routes())

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
})