search

tiengming / tiengming.github.io

My personal tech blog
1 stars 0 forks source link

基于CloudFlare workers应用进行AI绘图 #2

Open tiengming opened 3 months ago

tiengming commented 3 months ago

演示
ca6832cf36820f3a0fcfe.png 04beae21d486a3bf87022.png e69b41808e1e6e0ed88ef.png
a3f47639e1942ddf9e75b.png 85651a51a2b7c30fba416.png ef1264a0cdd944b15466d.png

演示地址：demo

部署流程

本项目基于：cloudflare workers应用系列之6:AI 生成图片 Text to Image App完成二次开发。

实现功能：

  1. 生成过程中加载动画提示
  2. 对原有的中文提示词生成效果不友好进行优化。主要实现过程为：调用大模型和提示词对提示词进行优化，让大模型生成绘图提示词👍👍👍。有一说一，大模型的提示词确实很好😊。

部署实现

  1. 进入cloudflare，并登录；

  2. 点击左侧栏workers-and-pages

  3. 创建workers。

  4. 编辑代码，将下方的代码覆盖添加到workers中。

    点击查看代码 ``` // worker.ts const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", }; const htmlContent = ` 免费AI Image Generator || buxiantang.top

    免费AI Image Generator

    建议使用提示词优化功能，中英文都可！

    develop by 51xmi

    导航页● 一键网上冲浪

    卜仙堂● 佛道仙易修行

    `; export default { async fetch(request, env) { if (request.method === "OPTIONS") { return new Response(null, { headers: corsHeaders }); } if (request.method === "POST") { try { const { content } = await request.json(); if (!content || typeof content !== 'string') { throw new Error("Invalid input"); } if (new URL(request.url).pathname === "/optimize-prompt") { const response = await env.AI.run( "@hf/meta-llama/meta-llama-3-8b-instruct", { prompt: content } ); const optimizedPrompt = typeof response === 'string' ? response : JSON.stringify(response); return new Response(JSON.stringify({ optimizedPrompt }), { headers: { "Content-Type": "application/json", ...corsHeaders, }, }); } else { const response = await env.AI.run( "@cf/bytedance/stable-diffusion-xl-lightning", { prompt: content } ); return new Response(response, { headers: { "content-type": "image/png", ...corsHeaders, }, }); } } catch (error) { console.error("Error in fetch function:", error); return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json", ...corsHeaders, }, }); } } return new Response(htmlContent, { headers: { "Content-Type": "text/html" }, }); }, }; ```

  5. 添加自定义域，你的自定义域就是访问地址

后续功能

另外，我也提供AI绘图服务。详见咸鱼店铺： 8eff9d3fc538bd1dc8e01.jpg

许可证

本项目遵循Apache-2.0