创新绘图体验：让语音、文本与画布互动，借助Gemini 2.0实现实时创作

最近在网上看到一个挺有趣的创意，结合了Canvas画布和Gemini 2.0的图像生成模型，能实现一种交互式绘图体验。你可以先在Canvas上画个草图，然后通过自然语言指令告诉Gemini，去丰富和完善你的作品。在多次互动下，图像的前后保持一致，非常有意思，比较适合用来激发小朋友的绘画创意。

仔细研究了下背后的原理，其实比较简单：

• 在Canvas上绘图，然后将绘图数据用base64编码
• 构造传给Gemini模型的参数，一个参数是图像数据，另一个参数是用户指令，且要求新的绘图要遵循已有图像的风格
• Gemini图像模型按照要求生成新的图像
• 拿到新的图像后重新绘制到Canvas上

初始创意交互比较简单，我想了下如何将其变成一个实用的产品形态，至少还需要补充这些功能：

1. 语言支持问题 ：目前Gemini模型对中文提示词支持不好，可能需要一个前置检测机制，把中文提示词翻译成英文，确保生成效果更好。
2. 语音输入 ：手机端打字不太方便，最好支持语音输入，让用户更轻松地表达自己的创意。
3. 撤回功能 ：在Canvas上涂鸦时，难免有手误，所以必须加上撤回功能，避免出现不小心画错的情况。
4. 保持绘图故事的连续性 ：为了确保图像风格一致，还需要设计合适的Prompt，帮助Gemini理解整个故事背景以及当前进度。
5. 绘图历史记录 ：需要一个功能，可以保存绘图的历史，方便随时回退到之前的某一张图片，保持创作过程的灵活性。
6. 重试功能 ：由于大模型的幻觉问题，有时会生成不完全符合预期的图片，最好加个重试按钮，让用户可以调整生成结果。
7. 导出功能 ：完成所有绘图后，当然需要导出功能，这样就能将作品转化成完整的漫画或故事，方便二次加工。

产品功能大概梳理完后，后续实现起来就一气呵成。我先在腾讯云上申请了一个硅谷的lighthouse服务器（Gemini需科学访问），又申请好了域名，接着按照以上的能力列表快速搭建好了项目的原型。

体验地址如下（ 欢迎大家在评论区留言提出更好的建议）：
https://co-drawing-pro.online/

文生图的原理科普

Gemini 2.0生图模型非常强大，最近在x上各种玩法层出不穷，Google官方还没有发表论文公布原理，从有限的信息来看，是基于优化后的扩散模型，那到底什么是扩散模型呢，为什么它能神奇的将一段文本转换成一张符合其语义的图片，这篇文章接下来的内容就简单聊聊扩散模型的原理，让大家有一个基本的认知。

我们用一只小猫的图片来理解扩散模型的运作原理。我们可以把这张图片看作是一个“信息”的载体，扩散过程就是这个信息的“变形”和“恢复”过程。在一个扩散模型的训练过程中，会经历正向扩展和逆向扩散两个阶段：

1. 正向扩散

正向扩散过程可以理解为将小猫的清晰图片逐渐变模糊，最后变成完全随机的噪声。就像在绘制小猫时，第一步是从清晰的图片开始，之后每一步都加入噪声，让小猫的细节逐渐消失，最终你无法再识别出这只小猫，只剩下随机的噪声。正向扩散的目的是让原始图像变得越来越难以识别，直到它变成纯粹的噪声。

这个过程通过一系列小的、逐步加噪的操作来进行。例如，每次我们都随机改变图片的一部分像素值，从而让图像的结构逐渐失去规律性，变得越来越模糊。

2. 逆向扩散

逆向扩散过程是正向扩散的反向过程，也就是从噪声开始，逐步恢复成原始的小猫图片。我们从完全随机的噪声开始，每一步都去除一部分噪声，逐渐恢复出图像的结构。每次去噪的过程都试图让图像逐步变得更加清晰，直到最终恢复成一个完整的小猫图像。

可以把逆向扩散理解为“还原”的过程，它通过学习如何从噪声中恢复出图像的细节。这一过程中的每一步都需要模型学会如何有效地去除噪声，使图像变得更加像我们想要的图像——在这个例子里，就是一只小猫。

扩散模型的基本原理 就是通过一个正向扩散过程将图片逐步加噪，并在逆向扩散过程中训练一个模型来逐步去除噪声。通过这种方式，模型学习到如何从噪声中恢复出图片的原始信息。正向扩散和逆向扩散分别是这个过程的“破坏”和“恢复”阶段，而扩散模型的任务就是通过训练来掌握这个恢复过程。

了解了大致的原理，我们再来聊一些细节问题，在扩散的过程中，如果针对原始像素空间（也就是每个像素点）做操作，无疑是非常消耗性能的，一个 512*512尺寸的RGB图片就有 512×512×3 = 786432个字节，计算成本极高，训练和推理都非常慢。

于是，聪明的研究员就发明了自编码器（VAE），用于将一张图片压缩到一个低维潜在表示，比如将 512*512图像压缩到 64*64的潜在表示，然后在这个低维空间中进行扩散过程，最后在推理时再从潜在空间恢复到原始的像素空间。这可以让计算效率大幅提高，甚至可以在消费级GPU上运行，自编码器大致的原理如下：

这种通过潜在空间去优化计算性能的方式DeepSeek在优化注意力得分的过程中也有用到，之前的文章有聊到，详见《我为何依然看好英伟达》。

解决了训练和推理过程中的性能问题，我们还需要理解文生图过程中，用户输入的文本的语义是如何能尽量保证和最终生成的图像的寓意对应上的，这就涉及到CLIP模型 。CLIP模型的主要作用就是通过将文本和图像放到相同的潜在空间后（已经向量化表示），再去理解二者的语义关系，简单的流程为：

• 用户输入文本提示（比如“A very cute kitten”）
• CLIP模型将文本提示转换成一个文本嵌入向量（数学表达）
• 扩散模型通过上文提到的潜在空间生成一个初步的潜在表示，并不断通过扩散过程进行去噪
• 在去噪生成的每一阶段，CLIP模型会检查生成的图像和文本之间的相似性，并提供反馈来调整图像，确保最终生成的图像语义和输入文本的语义一致。

了解了训练、优化、语义对齐的过程，就大致了解了文生图的基本原理，当然这其中有许多的技术细节，感兴趣的读者可以自行查找相关资料深入研究。

结语

随着多模态大模型能力的不断增强，我们将创意转化为产品的路径变得越来越短。我们需要做的，就是持续关注并实践，不仅仅是关注模型的功能层面，更要深入理解其背后的原理。

可以体验产品，并提出你的建议，我们一起打磨。
https://co-drawing-pro.online/