[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1120":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":15,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},1120,"euphony","openai\u002Feuphony","openai","Visualize harmony chat data and codex sessions in your browser","https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F",null,"TypeScript",388,40,351,3,0,6,26,9,56.44,"Apache License 2.0",false,"main",true,[],"2026-06-12 04:00:07","# Euphony: Harmony Chat and Codex Session Viewer\n\n[![Build](https:\u002F\u002Fgithub.com\u002Fopenai\u002Feuphony\u002Factions\u002Fworkflows\u002Fbuild.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fopenai\u002Feuphony\u002Factions\u002Fworkflows\u002Fbuild.yml)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache%202.0-blue)](https:\u002F\u002Fgithub.com\u002Fopenai\u002Feuphony\u002Fblob\u002Fmain\u002FLICENSE)\n\nVisualize harmony chat conversations and Codex sessions in your browser 🎵\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd colspan=\"3\">\u003Ca href=\"https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F\">\u003Cimg src='https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fcfdccb43-a63f-4495-8718-63efde8a1a11' width=\"100%\">\u003C\u002Fa>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\u003C\u002Ftr>\n  \u003Ctr>\n     \u003Ctd>\u003Ca href=\"https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F\">🎵 Euphony Demo\u003C\u002Fa>\u003C\u002Ftd>\n     \u003Ctd>\u003Ca href=\"https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F?path=https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002Fxiaohk\u002Fx-datasets\u002Fresolve\u002Fmain\u002Fhealth-bench-hard-20250508.jsonl\">💬 Harmony Chat Example\u003C\u002Fa>\u003C\u002Ftd>\n     \u003Ctd>\u003Ca href=\"https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F?path=https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002Fvictor\u002Fcodex-sample-session\u002Fresolve\u002Fmain\u002Fcodex-session-hi-2026-03-16.jsonl\">🤖 Codex Session Example\u003C\u002Fa>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n[Harmony](https:\u002F\u002Fgithub.com\u002Fopenai\u002Fharmony) conversations and [Codex session\nlogs](https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002Fcli\u002Ffeatures) are useful across\ntraining, evaluation, and agent workflows, but they are often difficult to\ninspect. Euphony addresses that gap by providing **portable**, **customizable**,\nand **modular** _Web Components_ for visualizing\nstructured chat data and Codex sessions in the browser.\n\n## Features\n\n| Feature                     | What it does                                                                                                               |\n| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------- |\n| Harmony conversation viewer | Renders Harmony conversations with support for different message types and metadata.                                       |\n| Codex session viewer        | Detects Codex session JSONL files, converts them into a conversation, and renders them in the same viewer.                 |\n| Flexible loading            | Loads data from the clipboard, local `.json` or `.jsonl` files, or public HTTP(S) JSON\u002FJSONL URLs.                         |\n| Markdown and HTML rendering | Renders markdown in message content, including formulas and optional HTML blocks.                                          |\n| Translation                 | Translates non-English text into English in normal mode or frontend-only mode with a user-provided OpenAI API key.         |\n| Metadata inspection         | Exposes conversation-level and message-level metadata directly in the UI.                                                  |\n| Filtering and focus mode    | Filters datasets with JMESPath and narrows visible messages by role, recipient, or content type.                           |\n| Grid and editor modes       | Supports dataset skimming in grid view and direct JSONL editing in editor mode.                                            |\n| Harmony token rendering     | Shows Harmony renderer output, token IDs, decoded tokens, and rendered display strings.                                    |\n| Embeddable web components   | Ships reusable custom elements for integrating the viewer into other web apps in any framework (e.g., React, Svelte, Vue). |\n\n## Get Started\n\nThere are two ways you can use Euphony.\n\n1. Use the [standalone app](https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F) to view Harmony JSON\u002FJSONL data and Codex session JSONL files.\n2. Use the Euphony JavaScript library to render Harmony data in your own web app.\n\n### Use [Euphony](https:\u002F\u002Fopenai.github.io\u002Feuphony\u002F) to View My Data\n\n1. Load data from one of the supported sources:\n   1. Paste JSON or JSONL from the clipboard\n   2. Choose a local `.json` or `.jsonl` file\n   3. Provide a public HTTP(S) URL that serves JSON or JSONL (e.g., Hugging Face)\n2. Euphony automatically detects and renders the input:\n   1. If the JSONL is a list of conversations → Euphony renders all conversations\n   2. If the JSONL is a Codex session file → Euphony renders a structured Codex session timeline\n   3. If the conversation is stored at some top-level field → Euphony renders all conversations and treat other top-level fields as each conversation’s metadata\n   4. Else → Euphony renders the data as raw JSON objects\n\n### Integrate Euphony into My Web App\n\n#### Web Component API\n\nTo use Euphony web components, first build the Euphony library:\n\n```\npnpm install\npnpm run build:library\n```\n\nThe main library entrypoint is built at: `.\u002Flib\u002Feuphony.js`.\n\nThen, you can import the JS file. To show a viewer of Harmony data, you can add the web component to your HTML file (or React, Svelte, Vue components):\n\n```html\n\u003Ceuphony-conversation conversation-string=\"HARMONY_CONVERSATION_JSON_STRING\">\n\u003C\u002Feuphony-conversation>\n```\n\nAlternatively, you can pass parsed JSON object directly into the `euphony-conversation` `HTMLElement` from Javascript.\n\n```tsx\nconst harmonyConversation: Conversation;\nconst myEuphonyConvoElement = document.querySelector('euphony-conversation');\nmyEuphonyConvoElement.conversationJSON = harmonyConversation;\n```\n\nEuphony web components are customizable. For example, to style these components, you can override CSS variables in your stylesheets.\n\n```css\n--euphony-padding-v: 10px;\n--euphony-padding-h: 15px;\n--euphony-font-color: hsl(0, 0%, 12.94%);\n--euphony-font-color-secondary: hsl(0, 0%, 61.96%);\n--euphony-user-color: hsl(122, 43.43%, 38.82%);\n--euphony-assistant-color: hsl(282, 67.88%, 37.84%);\n--euphony-conv-background-color: hsl(0, 0%, 96.08%);\n```\n\n## Frontend-only and Backend-assisted Modes\n\nEuphony can run in two modes:\n\n| Mode                  | What it is for                                                                                                                                                    |\n| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Frontend-only mode    | Recommended for static or external hosting. URL loading happens in the browser, and translation uses a user-provided OpenAI API key when needed.                  |\n| Backend-assisted mode | Optional for local development. The FastAPI server supports remote JSON\u002FJSONL loading, backend translation, and Harmony rendering. Useful to load large datasets. |\n\nThe backend server is optional. It should only be used locally. Frontend-only mode is controlled with the Vite env variable `VITE_EUPHONY_FRONTEND_ONLY`.\n\n- Set `VITE_EUPHONY_FRONTEND_ONLY=true` to force frontend-only mode.\n- Set `VITE_EUPHONY_FRONTEND_ONLY=false` to use the local backend-assisted mode.\n\nThe current backend includes a remote URL fetch path for loading JSON and JSONL data. If you host that backend on an external server, it can introduce SSRF risk because the server may be tricked into fetching attacker-controlled URLs. Therefore, only use the backend-assisted mode for local development.\n\n## Development\n\nTo develop Euphony locally, install Node.js and a package manager such as\n[pnpm](https:\u002F\u002Fpnpm.io\u002F).\n\nStart the backend server:\n\n```bash\npnpm install\nuvicorn fastapi-main:app --app-dir server --host 127.0.0.1 --port 8020 --reload\n```\n\nStart the frontend development server:\n\n```bash\npnpm run dev\n```\n\nTo force frontend-only mode with Vite:\n\n```bash\nVITE_EUPHONY_FRONTEND_ONLY=true pnpm run dev\n```\n\nVisit [http:\u002F\u002Flocalhost:3000\u002F](http:\u002F\u002Flocalhost:3000\u002F), you should see Euphony running in your browser!\n\nTo build the static frontend:\n\n```bash\npnpm run build\npython -m http.server -d .\u002Fdist\n```\n\nTo build a frontend-only static bundle:\n\n```bash\nVITE_EUPHONY_FRONTEND_ONLY=true pnpm run build\npython -m http.server -d .\u002Fdist\n```\n\n## License\n\nEuphony is released under the Apache 2.0 license. See [`LICENSE`](.\u002FLICENSE).\n\nThe file [`src\u002Fcss\u002Fprism-coldark-auto.css`](.\u002Fsrc\u002Fcss\u002Fprism-coldark-auto.css) is derived\nfrom an upstream Prism theme ([GitHub](https:\u002F\u002Fgithub.com\u002FArmandPhilippot\u002Fcoldark-prism))\nand remains subject to the MIT license terms of that upstream work.\n","Euphony 是一个用于在浏览器中可视化和谐聊天对话和Codex会话的工具。它利用Web组件技术，提供便携、可定制且模块化的解决方案来展示结构化的聊天数据与Codex会话记录。项目支持多种消息类型及元数据渲染、从剪贴板或本地\u002F远程JSON文件加载数据等功能，并能够渲染Markdown和HTML内容。此外，Euphony还具备翻译非英文文本、过滤特定角色或内容的消息以及以网格或编辑器模式浏览数据集的能力。适用于需要对AI聊天记录或编程辅助会话进行深入分析的研究人员、开发者等场景。",2,"2026-06-11 02:41:43","CREATED_QUERY"]