') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); 【外滩大会2026】Creator City · 创作者之城 —— AI 创作者的像素城市、个人展厅与交流社区 · Issue #124 · modelstudioai/modelstudioai.github.io · GitHub
Skip to content

【外滩大会2026】Creator City · 创作者之城 —— AI 创作者的像素城市、个人展厅与交流社区 #124

Closed
Closed
【外滩大会2026】Creator City · 创作者之城 —— AI 创作者的像素城市、个人展厅与交流社区#124
Labels
showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

Description

@farlyfeifei
farlyfeifei
opened on Aug 9, 2026

🟢 产品已上线 · 点击立即体验

👉 https://crecity.farly.me 👈

参赛项目名称

Creator City | 创作者之城 —— AI 创作者的像素城市、个人展厅与交流社区

团队 / 作者

farlyfeifei（星橙）

我做了什么

用 AI 编程完成了「Creator City · 创作者之城」，一个把个人主页升级为「动态影片 + 可进入的像素城市 + 可参与的 Agent 辩论」的全栈 AI 创作者社区：

  1. 个人故事引擎：导入 GitHub / 简历（PDF/DOCX/TXT/Markdown 文字提取）/ 视频 / 图片 / 文档等真实素材，系统读取媒体元数据、抽取代表画面，用户的评论决定素材对应哪段经历，自动编排成六段叙事，并用 Remotion 生成 1280×720 H.264 的动态自我介绍影片（身份、轨迹、结果、项目、论文、技能、结尾等场景）。
  2. 像素城市：北京院落风格的 Phaser 像素城市，WASD 行走、九座独立建筑、NPC 档案、茶务 NPC、双 Agent 相遇交谈循环，每栋建筑对应一个真实功能模块。
  3. Agent 群聊辩论：微信风格 Agent 群聊，内置 30+ 预制人物（Musk、张雪峰、张一鸣、Claude、雷军、Sam Altman、Einstein…），个人 Agent 通过问卷生成画像后进入群聊；保留原始辩论核心（调度、验证、重试、裁判），核心辩论环节由阿里云百炼通义千问 qwen-plus（DashScope OpenAI 兼容模式）驱动，同时保留 MiMo / grok2api 等多 Provider 切换能力，个人 Agent 经档案适配层进入辩论。
  4. 黑客松会场与组队协作：比赛公告、AI 组队按空缺席位匹配、Demo 展示博物馆、开发测试悬赏桌（复现、验收、积分与红包）、创作者会面桌。
  5. 模型竞技场：基于 OpenRouter 实时目录的九维模型榜单（综合 / 编程 / 推理 / Agent / 多模态 / 价格 / 速度 / 上下文），用于 AI 产品选型对比。
  6. Skill 花园 / AI 情报台 / AI 导师 / 创作者展廊：真实工作流技能标本库、聚合 OpenAI RSS 与 GitHub RSS 的可追溯信号流、基于个人档案的能力评估成长系统、公开 GitHub 创作者动态主页影片展廊。

项目已完整上线（注册 → 填写档案 → 上传素材 → 生成个人 Agent → 进入 Agent 辩论 → 实时渲染影片 → 刷新恢复全部数据），主链路全流程可演示。

使用的工具

  • AI 编程：Claude / Codex 等多 Agent 协作开发，opencode
  • 百炼能力 / 模型： Agent 群聊辩论核心环节由阿里云百炼 qwen-plus（DashScope OpenAI 兼容模式）驱动
  • 前端：Next.js 16、React 19、Tailwind 4、Framer Motion、GSAP、Lenis
  • 视频：Remotion 4（Player / Web Renderer / CLI 现场渲染 MP4）
  • 城市：Phaser 4
  • 后端：FastAPI（Python）、多 Provider 适配
  • 数据：Supabase（账号 / 档案 / Agent / 辩论消息 / 用量记录）、IndexedDB（本地媒体库）、Zod 4 数据校验
  • 其他：GitHub API、OpenRouter API、OpenAI RSS / GitHub RSS 聚合

效果展示

在线 Demo（已部署，可完整体验主链路）：https://crecity.farly.me

项目链接（可选）

踩坑记录（可选）

  1. 视频素材与叙事对不上：个人影片如果只是循环播放素材开头，评委看到的信息量很低。解决方案是把「素材评论」升级为叙事线索——支持从评论中的 00:12 等时间点自动选取多个视频片段，按「问题 → 职责 → 行动 → 画面证据 → 结果/复盘」形成完整主线。
  2. 实时预览与导出不一致：Remotion 实时预览不编码所以立刻出画，导出才逐帧生成文件。为避免用户误以为成品丢失，导演台明确提示「预览不是成片，导出才会编码」。
  3. 无 API Key 时不能造假：Chat Debate 在未配置模型 Provider 时如实提示 AI 不可用，而不是生成本地模板轮播对话——守住真实性的底线。
  4. 素材文件必须可恢复：二进制媒体（视频/图片/PDF）不能只留在内存，上传后即使刷新或重新登录也能恢复，因此媒体库落在浏览器 IndexedDB 并按用户隔离。

小红书人气奖参赛笔记

Metadata

Metadata

Assignees

No one assigned

    Labels

    showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions