Shadcn/ui 是一个功能强大的 UI 组件库，结合文本提示和图像生成来创建 UI 可以为用户带来独特的设计体验。以下是使用 shadcn/ui 通过简单的文本提示和图像生成 UI 的步骤：
一、准备工作
npm install @shadcn/ui二、了解 shadcn/ui 组件
三、设计流程
Navbar 组件。Box、Stack、Grid 等）来组织 UI 的布局。根据图像灵感和用户体验原则，合理安排各个组件的位置和大小。四、示例代码
以下是一个使用 shadcn/ui 创建简单 UI 的示例代码：
import { Button, Input } from '@shadcn/ui';
function MyApp() {
return (
<div>
<Input placeholder="搜索..." />
<Button>搜索</Button>
</div>
);
}
export default MyApp;在这个示例中，我们使用了 shadcn/ui 的 Input 和 Button 组件来创建一个简单的搜索界面。你可以根据自己的需求进行进一步的定制和扩展。
总之，使用 shadcn/ui 通过简单的文本提示和图像生成 UI 可以为你的设计过程带来更多的创意和灵感。通过结合图像生成工具和强大的 UI 组件库，你可以创建出独特、美观且功能强大的用户界面。
17 小时前
命令优先，而非图形界面。
1 个月前
AI图片生成集成指南：从API到SDK的完整实现路径 在腾讯EdgeOne Pages模版详情页面点击“Deploy”按钮，填写必要的API密钥，点击“开始部署”——短短几分钟内，一个完整的AI图片生成应用就这样上线了。 随着人工智能技术的快速发展，AI图片生成功能已成为现代应用中不可或缺的一部分。无论是内容创作、产品设计还是营销素材制作，AI图片生成技术都能提供高效、创新的解决方案。 对于开发者而言，如何将这项能力快速、安全地集成到自己的应用中，成为了一个值得深入探讨的课题。 01 理解两种集成路径 原生API调用和AI SDK封装调用是当前将AI图片生成能力集成到应用中的两种主要技术路径，每种路径都有其独特的优势和应用场景。 原生API调用提供了精细控制和高度灵活性，开发者可以直接与底层API交互，定制化程度高。AI SDK则通过统一接口简化了开发流程，实现了多厂商模型的轻松切换。 以EdgeOne Pages为例，这两种集成方式都有对应的模版：ai-image-generator-starter用于原生接口调用，而ai-sdk-image-generator-starter则适用于AI SDK封装调用。 在开始集成之前，开发者需要根据自身需求选择合适的技术路径。对于追求控制和定制化的项目，原生API调用是更好的选择；而对于希望快速上线并支持多种模型的项目，AI SDK封装调用则更为合适。 02 快速入门：环境准备与部署 要实现AI图片生成功能，首先需要申请API Key。主流AI图片生成提供商的API Key获取地址包括： Hugging Face：huggingface.co/settings/tokens OpenAI：platform.openai.com/api-keys Replicate：replicate.com/account/api-tokens Fal：fal.ai/dashboard/keys Nebius：nebius.com/console 部署过程简单直观。以ai-sdk-image-generator-starter模版为例，在模版详情页面点击“Deploy”按钮，系统将跳转到EdgeOne Pages控制台。 在部署界面，开发者需要配置环境变量，这些配置项对应不同AI图片生成服务的API Key。不同模版会呈现不同的配置项列表，但必须确保至少有一个API Key配置正确且可用。 完成配置后点击“start deployment”按钮，项目就会开始自动部署。部署成功后，GitHub帐户下会生成一个与模版相同的项目，开发者可以通过git clone命令将其下载到本地进行进一步的开发和定制。 03 原生API调用详解 原生API调用方式让开发者能够精细控制每一个请求细节。在这一模式下，图片生成的基本流程是：前端发送生图参数到边缘函数，边缘函数调用AI模型API，最后将生成的图片返回给前端显示。 在前端部分，用户需要配置可用的AI模型列表。以src/pages/index.tsx文件中的核心代码为例： const res = await fetch("/v1/generate", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ image: `${prompt} (${modelInfo.name} style)`, platform: platform.id, model: modelInfo.value || selectedModel, }), }); 边缘函数的处理逻辑位于functions/v1/generate/index.js文件中。函数首先接收前端传递的参数，然后检查对应平台的环境变量是否配置正确。 const validateToken = (platform) => { const tokens = { nebius: env.NEBIUS_TOKEN, huggingface: env.HF_TOKEN, replicate: env.REPLICATE_TOKEN, openai: env.OPENAI_API_KEY, fal: env.FAL_KEY, }; if (!tokens[platform]) { throw new Error( `${platform} API token is not configured. Please check your environment variables.` ); } }; 这种通过env访问环境变量的方式，有效防止了API密钥在代码中明文暴露，提高了应用的安全性。敏感信息存储在环境变量中，而非硬编码在源代码里。 环境变量检查完成后，函数会直接请求对应平台的图片生成模型API。以HuggingFace为例，其标准API请求核心代码如下： const response = await PROVIDERS.fetch(url, { headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, method: "POST", body: JSON.stringify(data), }); EdgeOne Pages的AI图片生成模版已经支持了多种主流模型，包括HuggingFace、OpenAI、Replicate、Fal、Nebius等。生成图片后，函数将结果返回给前端，模版项目内已经内置了图片显示的完整逻辑。 04 AI SDK封装调用解析 与原生API调用方式相比，AI SDK封装调用通过统一接口简化了开发流程。它允许开发者使用相同的代码结构调用不同厂商的AI图片模型，显著提高了开发效率和多模型切换的便利性。 在AI SDK方式下，前端通过/api/generate接口发送请求： const response = await fetch(apiUrl, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ prompt, model, size, }), }); 这里需要注意的是，size参数需要提前设置，因为不同的模型支持的尺寸列表可能不一致。 例如，DALL-E 3支持“1024x1024”、“1024x1792”、“1792x1024”等尺寸，而Stable Diffusion可能支持“512x512”、“768x768”等不同规格。 EdgeOne Pages的AI SDK图片生成模版已经梳理了AI SDK支持模型对应的尺寸列表，相关配置位于components/modelSizeMapping.ts文件中。开发者可以直接使用这些预配置的尺寸映射，无需手动处理不同模型的尺寸兼容性问题。 AI SDK同样避免了密钥泄漏风险。函数在调用AI图片模型时，使用AI SDK暴露的experimental_generateImage对象来统一生成图片内容，密钥的获取由experimental_generateImage在内部自动处理。 const imageResult = await experimental_generateImage({ model: imageModel, prompt: prompt, size: size, // Use frontend-provided size }); 调用experimental_generateImage后，只需要读取函数返回的标准格式内容即可： const imageUrl = `data:image/png;base64,${imageResult.image.base64}`; return new Response( JSON.stringify({ images: [ { url: imageUrl, base64: imageResult.image.base64, }, ], }) ); 05 本地调试与持续集成 开发者在下载项目到本地后，可能需要进行本地开发、调试或预览。为了简化本地环境配置，EdgeOne提供了专门的CLI工具。 使用EdgeOne CLI需要先安装并登录，具体步骤可以参考EdgeOne CLI的文档介绍。在安装和登录后，开发者可以在本地项目下执行edgeone pages link命令，将项目与EdgeOne Pages控制台的项目进行关联。 执行该命令后，系统会提示输入EdgeOne Pages的项目名，即上文部署的模版项目的项目名称。输入项目名后，EdgeOne Pages控制台的环境变量会自动同步到本地。 关联成功后，本地项目根目录下会生成.env文件，包含所有已配置的环境变量列表。关联后，可以执行edgeone pages dev命令来进行本地部署，部署后可以在localhost:8088进行访问。 对于代码的自定义修改，开发者可以直接通过git提交项目到GitHub。EdgeOne Pages会检测GitHub的提交记录并自动进行重新部署，实现真正的持续集成与持续部署。 部署完成后，控制台会显示部署状态和预览界面，开发者可以立即验证功能是否正常工作。 AI图片生成集成后的应用界面，简洁直观。模板提供了开箱即用的用户界面，用户可以直接输入提示词、选择模型和调整参数，生成结果会即时显示在右侧区域。 在本地测试过程中，如果对生成效果或性能有特定要求，开发者可以灵活切换不同的AI模型提供商。不同的模型在风格表现、细节处理等方面各有特色，有些专注于写实风格，有些擅长艺术创作，实际测试是找到最适合项目的关键一步。 （ 文章来源：Tencent Cloud ）
3 个月前
恒图科技是一家专注于数字创意视觉内容创作与人工智能技术融合的文化科技型企业。恒图科技（成都恒图科技有限责任公司）在数字视觉内容创作和人工智能领域具有全球影响力，尤其以其核心产品Fotor而闻名。 这里是公司及业务概览： 类别 详细信息 公司名称 成都恒图科技有限责任公司 成立时间 2009年 创始人/CEO 段江 公司定位 专注于视觉内容创作与人工智能融合创新的科技型企业 核心产品 Fotor (图片处理与设计软件)、Clipfly (AI视频制作平台) 技术核心 HDR（高动态范围图像）技术、生成式人工智能(AIGC) 市场与用户 覆盖全球200多个国家和地区，用户量约7-8亿，绝大部分为海外用户 主要荣誉 2025年福布斯中国人工智能科技企业TOP50、德勤中国高科技高成长50强 🚀 发展历程与核心优势 恒图科技的发展历程，是一部深耕技术、顺势而为的进化史。 技术奠基与出海：公司自成立起就专注于图像处理技术，尤其在HDR（高动态范围图像）技术领域拥有领先的核心专利。早期，团队就做出了一个关键决策：主攻海外市场，打造标准化的产品。其产品因操作简单、效果专业，迅速获得了海外用户的认可，BBC曾将Fotor誉为“Photoshop的后继者”。 拥抱AI浪潮：当生成式人工智能（AIGC）兴起时，恒图科技展现了强大的技术敏锐度和快速反应能力。他们在2022年10月就为Fotor上线了AI功能，并逐步将产品从单一的图片编辑，拓展为涵盖AI文生图、AI文生视频等超100种功能的一站式AI视觉内容创作平台。这不仅吸引了更多用户，也让他们成为国内为数不多在该领域实现规模化盈利的企业。 强大的技术合作：为了支撑全球海量用户的创作需求，恒图科技与火山引擎展开了深度合作。火山引擎为其提供了强大的AI算力保障，支撑了恒图超过80%的推理和训练任务。这一合作显著提升了其AI视频生成的能力与质量，帮助恒图实现了用户付费转化率提升23%、AI人均视频生成次数提升12%的亮眼成绩。 🛠️ 主要产品与应用 恒图科技的产品矩阵紧密围绕“让创作更简单”这一核心目标展开。 Fotor：这是恒图科技的旗舰产品。它不仅仅是一个修图工具，更是一个覆盖网页端、移动端和桌面端的一体化设计平台。通过引入AI技术，Fotor极大地降低了专业设计的门槛，让没有任何设计背景的普通用户也能轻松制作海报、社交媒体图片等。 Clipfly：这是恒图科技推出的一站式AI视频制作平台。它集成了文生视频、图生视频、自动字幕、视频编辑等功能，让一个人、一台电脑就能快速完成具有电影质感的视频创作，极大地降低了视频创作的成本和门槛。该产品在文旅宣传、内容创作等领域有很好的应用前景。 🌍 行业影响与未来前景 恒图科技的成功，不仅在于商业上的成就，更在于其带来的行业变革与文化价值。 推动创作“智能化”：恒图科技将自己定位为数字创意创作“智能化”的推动者。如果说Photoshop代表了“专业化”，Canva代表了“平民化”，那么Fotor的目标就是通过AI技术，将视觉内容创作带入“全民皆可为的智能化时代”。 架起文化出海桥梁：恒图科技的产品拥有庞大的海外用户群，这使其成为中国文化出海的一个独特渠道。通过Fotor、Clipfly等产品，中国传统的文化元素、IP可以以图像、视频等更易被接受的形式传播到全球，促进跨文化的交流与理解。 （ 图片来源：fotor.com.cn ）
7 个月前
2024年8月，德国黑森林AI实验室(Black Forest Labs)正式从隐身模式走向公众视野，发布了备受瞩目的FLUX.1模型套件。这套模型在各个方面都达到了新的行业标准，迅速在AI图像生成领域掀起波澜。FLUX.1模型在用户评价中超越了Midjourney和OpenAI的DALL-E，在Hugging Face平台上的下载量占据榜首。 黑森林AI实验室在今年五月份推出的名为“Kontext”的AI模型系列，不仅能生成图像，还能在图像生成之后进行复杂的编辑。这种双重能力让Kontext在拥挤的AI视觉模型市场中脱颖而出，与市面上的DALL·E或Stable Diffusion不同，Kontext在统一架构中同时训练图像生成和编辑任务，实现更准确的图像理解与上下文编辑能力。 .
1 年前
Shadcn/ui 是一个功能强大的 UI 组件库，结合文本提示和图像生成来创建 UI 可以为用户带来独特的设计体验。
1 年前
Motiff 妙多大模型是全球首个由 UI 设计工具企业研发的大模型。
1 年前
AI在LOGO设计中的能力水平正在快速发展，以下是对其能力的分析： 1. 生成速度与效率 AI工具能够在短时间内生成多个LOGO选项，极大地提高了设计效率。用户只需输入品牌名称、行业和偏好颜色，AI便能快速提供多种设计方案，节省了大量的人工设计时间[1][2][5]。 2. 可定制性 许多AI LOGO生成器允许用户对生成的LOGO进行高度定制，包括颜色、字体和图形元素的调整。这种灵活性使得用户能够创建符合品牌形象的独特LOGO[2][4]。 3. 可访问性 AI LOGO设计工具的普及使得即使没有设计经验的用户也能轻松创建专业的LOGO。这些工具通常提供直观的界面和简单的操作流程，降低了设计的门槛[3][5]。 4. 设计质量 虽然AI生成的LOGO在速度和可定制性上表现出色，但它们的设计质量可能会因算法的限制而有所差异。某些AI工具可能生成的LOGO较为通用，缺乏独特性，尤其是在复杂的品牌需求下[2][4]。 5. 人机协作 尽管AI在LOGO设计中展现了强大的能力，但人类设计师的创造力和情感理解仍然不可或缺。许多设计专家建议将AI视为辅助工具，与人类设计师的创意相结合，以实现最佳的设计效果[2][3]。 6. 法律与伦理考虑 使用AI生成的LOGO时，用户需了解相关的版权和法律条款，以避免侵犯他人知识产权。确保使用的AI工具是合法和道德的，避免使用未经授权的图像[3][5]。 7. 未来趋势 预计到2025年，约80%的LOGO设计过程将涉及某种形式的AI辅助，这表明AI在设计领域的应用将越来越普遍。随着技术的进步，AI设计工具的能力和效果也将不断提升[2][4]。 综上所述，AI在LOGO设计中展现出强大的生成能力和效率，但在追求独特性和品牌个性方面，仍需与人类设计师的创意结合，以实现最佳效果。 来源：Perplexity.ai
1 年前
DALL·E 2可以根据文本生成图像以及对现有图像进行编辑等。DALL·E 3相比DALL·E 2在生成的图像质量、对提示词的理解、上下文理解、处理复杂任务等方面有提升。
Minimax（海螺AI）已由大模型名Minimax替换原海螺AI。现海螺AI为Minimax视频生成产品名。
海螺AI