[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-simonw--tools":3,"tool-simonw--tools":62},[4,18,26,35,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,2,"2026-04-18T11:18:24",[14,15,13],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":32,"last_commit_at":41,"category_tags":42,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[43,13,15,14],"插件",{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":10,"last_commit_at":50,"category_tags":51,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[52,15,13,14],"语言模型",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4292,"Deep-Live-Cam","hacksider\u002FDeep-Live-Cam","Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具，用户仅需一张静态照片，即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点，让高质量的数字内容创作变得触手可及。\n\n这款工具不仅适合开发者和技术研究人员探索算法边界，更因其极简的操作逻辑（仅需三步：选脸、选摄像头、启动），广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换，还是制作趣味短视频和直播互动，Deep-Live-Cam 都能提供流畅的支持。\n\n其核心技术亮点在于强大的实时处理能力，支持口型遮罩（Mouth Mask）以保留使用者原始的嘴部动作，确保表情自然精准；同时具备“人脸映射”功能，可同时对画面中的多个主体应用不同面孔。此外，项目内置了严格的内容安全过滤机制，自动拦截涉及裸露、暴力等不当素材，并倡导用户在获得授权及明确标注的前提下合规使用，体现了技术发展与伦理责任的平衡。",88924,"2026-04-06T03:28:53",[14,15,13,61],"视频",{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":78,"owner_email":76,"owner_twitter":73,"owner_website":79,"owner_url":80,"languages":81,"stars":102,"forks":103,"last_commit_at":104,"license":105,"difficulty_score":106,"env_os":107,"env_gpu":108,"env_ram":107,"env_deps":109,"category_tags":112,"github_topics":76,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":114,"updated_at":115,"faqs":116,"releases":151},9071,"simonw\u002Ftools","tools","Assorted useful tools, almost entirely generated using LLMs","tools 是知名开发者 Simon Willison 打造的一个在线实用工具箱，汇集了数十个专注于图像处理、文档解析及文本操作的小型 Web 应用。它主要解决了用户在日常生活中频繁遇到的碎片化需求，例如快速裁剪社交媒体配图、对比图片压缩质量、在浏览器端直接进行 OCR 文字识别、转换文件格式（如 RTF 转 HTML）以及可视化 PDF 差异等，让用户无需安装庞大软件即可完成特定任务。\n\n这套工具集非常适合设计师、内容创作者、开发者以及任何需要高效处理多媒体文件的普通用户使用。其最独特的技术亮点在于“提示词驱动开发”的实验性质：绝大多数工具并非由人类逐行编写，而是借助大语言模型（LLM）自动生成 HTML 和 JavaScript 代码构建而成。项目不仅开源了所有代码，还公开了每个工具的生成对话记录与提交信息，既展示了 AI 辅助编程的实际潜力，也为开发者探索如何与大模型协作提供了生动的参考案例。所有功能均基于浏览器运行，注重隐私与便捷性，是体验轻量级 AI 开发成果的绝佳窗口。","# tools.simonwillison.net\n\nMiscellaneous HTML+JavaScript tools built mostly with the help of LLMs. See also [\u002Fpython\u002F](https:\u002F\u002Ftools.simonwillison.net\u002Fpython\u002F) for tools written using Python.\n\nThis collection is an experiment in prompt-driven development with very low stakes.\n\nThe [colophon](https:\u002F\u002Ftools.simonwillison.net\u002Fcolophon) lists commit messages and transcripts for every tool.\n\nThe code lives in [simonw\u002Ftools](https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools) and many tools used the Claude custom instructions [described here](https:\u002F\u002Fsimonwillison.net\u002F2024\u002FDec\u002F19\u002Fone-shot-python-tools\u002F#custom-instructions).\n\n\u003C!-- recently starts -->\n\u003C!-- recently stops -->\n\n## Image and media\n- [Social media cropper](https:\u002F\u002Ftools.simonwillison.net\u002Fsocial-media-cropper) crop images to 2×1 for social sharing\n- [Image resize and quality comparison](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-resize-quality) compare JPEG quality settings\n- [Image to JPEG](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-to-jpeg) convert PNG or WebP files to JPEG\n- [Image to SVG](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-to-svg) trace bitmap images to SVG paths\n- [SVG to JPEG\u002FPNG](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-render) render an SVG to a raster image\n- [SVG sandbox](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-sandbox) display decoded SVG files safely\n- [SVG progressive render](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-progressive-render) watch an SVG draw itself\n- [BBox cropper](https:\u002F\u002Ftools.simonwillison.net\u002Fbbox-cropper) draw bounding boxes and read the coordinates\n- [Mask visualizer](https:\u002F\u002Ftools.simonwillison.net\u002Fmask-visualizer) inspect JSON masks with bounding boxes\n- [FFmpeg crop helper](https:\u002F\u002Ftools.simonwillison.net\u002Fffmpeg-crop) generate FFmpeg commands for cropped videos\n- [TIFF orientation viewer](https:\u002F\u002Ftools.simonwillison.net\u002Ftiff-orientation) inspect EXIF orientation metadata\n- [Avatar web component](https:\u002F\u002Ftools.simonwillison.net\u002Favatar-web-component) upload and crop avatars in place\n- [YouTube Thumbnails](https:\u002F\u002Ftools.simonwillison.net\u002Fyoutube-thumbnails) list thumbnail URLs for a video\n\n## Text and document\n- [OCR](https:\u002F\u002Ftools.simonwillison.net\u002Focr) recognize text from images and PDFs in your browser\n- [PDF OCR](https:\u002F\u002Ftools.simonwillison.net\u002Fpdf-ocr) run optical character recognition on uploaded PDFs\n- [Compare PDFs](https:\u002F\u002Ftools.simonwillison.net\u002Fcompare-pdfs) visualize differences between two PDFs\n- [Render Markdown](https:\u002F\u002Ftools.simonwillison.net\u002Frender-markdown) convert Markdown to HTML using the GitHub API\n- [HTML preview](https:\u002F\u002Ftools.simonwillison.net\u002Fhtml-preview) type HTML on the left and see it rendered on the right\n- [RTF to HTML](https:\u002F\u002Ftools.simonwillison.net\u002Frtf-to-html) inspect RTF clipboard data and convert it to HTML\n- [Markdown math](https:\u002F\u002Ftools.simonwillison.net\u002Fmarkdown-math) live preview of Markdown with LaTeX equations\n- [Footnotes experiment](https:\u002F\u002Ftools.simonwillison.net\u002Ffootnotes-experiment) demo linking footnotes to popups\n- [Reading time calculator](https:\u002F\u002Ftools.simonwillison.net\u002Freading-time) estimate how long text will take to read\n- [Word counter](https:\u002F\u002Ftools.simonwillison.net\u002Fword-counter) count words across multiple text blocks\n- [Text wrap balance nav](https:\u002F\u002Ftools.simonwillison.net\u002Ftext-wrap-balance-nav) explore the `text-wrap: balance` property\n- [Navigation for headings](https:\u002F\u002Ftools.simonwillison.net\u002Fnav-for-headings) generate an ID-based table of contents\n- [Paste rich text](https:\u002F\u002Ftools.simonwillison.net\u002Fpaste-rich-text) inspect HTML and plain text on your clipboard\n- [Paste HTML subset](https:\u002F\u002Ftools.simonwillison.net\u002Fpaste-html-subset) see which tags survive HTML sanitization\n- [Clipboard viewer](https:\u002F\u002Ftools.simonwillison.net\u002Fclipboard-viewer) debug everything stored in your clipboard\n- [Extract URLs](https:\u002F\u002Ftools.simonwillison.net\u002Fextract-urls) pull a list of links from pasted HTML\n- [JSON to Markdown transcript](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-to-markdown-transcript) convert transcript JSON to Markdown\n- [JSON to YAML](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-to-yaml) convert between JSON and YAML formats\n- [YAML Explorer](https:\u002F\u002Ftools.simonwillison.net\u002Fyaml-explorer) browse YAML documents in a collapsible tree\n- [JSON schema builder](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-schema-builder) visually design a JSON schema\n- [Incomplete JSON printer](https:\u002F\u002Ftools.simonwillison.net\u002Fincomplete-json-printer) pretty print partial JSON documents\n- [PHP Deserializer](https:\u002F\u002Ftools.simonwillison.net\u002Fphp-deserializer) turn serialized PHP into JSON\n- [SQL Pretty Printer](https:\u002F\u002Ftools.simonwillison.net\u002Fsql-pretty-printer) reformat SQL queries for readability\n- [Pipfile.lock parser](https:\u002F\u002Ftools.simonwillison.net\u002Fpipfile) extract dependency versions from `Pipfile.lock`\n\n## Data and time utilities\n- [Timestamp Converter](https:\u002F\u002Ftools.simonwillison.net\u002Funix-timestamp) convert Unix timestamps to readable dates\n- [Timezones](https:\u002F\u002Ftools.simonwillison.net\u002Ftimezones) compare times across multiple time zones\n- [Date calculator](https:\u002F\u002Ftools.simonwillison.net\u002Fdate-calculator) count days between dates or only weekdays\n- [Transfer time estimator](https:\u002F\u002Ftools.simonwillison.net\u002Ftransfer-time) work out how long file transfers will take\n- [Token usage calculator](https:\u002F\u002Ftools.simonwillison.net\u002Ftoken-usage) summarize LLM token logs by model\n- [LLM prices redirect](https:\u002F\u002Ftools.simonwillison.net\u002Fllm-prices) quick link to the latest model pricing site\n- [CSV marker map](https:\u002F\u002Ftools.simonwillison.net\u002Fcsv-marker-map) plot markers on a map from a CSV file\n- [Species observation map](https:\u002F\u002Ftools.simonwillison.net\u002Fspecies-observation-map) browse recent iNaturalist sightings\n\n## GitHub and development\n- [GitHub API write](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-api-write) upload text or images directly to a repo\n- [GitHub issue viewer](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-issue) fetch GitHub issues and comments\n- [GitHub issue to Markdown](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-issue-to-markdown) turn an issue thread into Markdown\n- [Zip\u002FWheel explorer](https:\u002F\u002Ftools.simonwillison.net\u002Fzip-wheel-explorer) view the contents of Python wheels and zips\n- [Ares phonetic alphabet](https:\u002F\u002Ftools.simonwillison.net\u002Fares) convert text to the ARES emergency phonetic code\n- [Code with Claude 2025](https:\u002F\u002Ftools.simonwillison.net\u002Fcode-with-claude-2025) prototype workflow for Claude coding\n- [Side panel dialog demo](https:\u002F\u002Ftools.simonwillison.net\u002Fside-panel-dialog) experiment with the HTML `dialog` element\n- [Broadcast channel chat](https:\u002F\u002Ftools.simonwillison.net\u002Fbroadcast-channel-chat) chat across tabs using BroadcastChannel\n\n## Bluesky and social tools\n- [Bluesky WebSocket Firehose](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-firehose) watch real-time activity on Bluesky\n- [Bluesky resolve DID](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-resolve) convert a handle like `simonwillison.net` into a DID\n- [Bluesky timeline](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-timeline) view a user’s recent posts and replies\n- [Bluesky thread export](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-thread) save a Bluesky thread to Markdown\n- [Bluesky quote finder](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-quote-finder) find all quotes of a Bluesky post\n- [Event planner](https:\u002F\u002Ftools.simonwillison.net\u002Fevent-planner) rough schedule planner stored in localStorage\n- [Passkeys demo](https:\u002F\u002Ftools.simonwillison.net\u002Fpasskeys) experiment with browser-based passkey authentication\n\n## LLM playgrounds and debuggers\n- [Haiku](https:\u002F\u002Ftools.simonwillison.net\u002Fhaiku) generate haikus using Claude Haiku and your webcam\n- [Chrome Prompt Playground](https:\u002F\u002Ftools.simonwillison.net\u002Fchrome-prompt-playground) run prompts on Chrome’s Gemini Nano\n- [Gemini bounding box visualizer](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-bbox) visualize bounding boxes returned by Gemini\n- [Gemini chat client](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-chat) simple chat UI for the Gemini API\n- [Gemini mask visualizer](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-mask) overlay segmentation masks from Gemini\n- [Gemini image JSON renderer](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-image-json) display images from Gemini JSON output\n- [Claude Token Counter](https:\u002F\u002Ftools.simonwillison.net\u002Fclaude-token-counter) count tokens for Claude prompts\n- [OpenAI audio input](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-audio) record and send audio to OpenAI models\n- [OpenAI audio output](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-audio-output) generate speech with OpenAI voices\n- [OpenAI WebRTC demo](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-webrtc) interact with OpenAI’s real-time audio API\n- [GPT-4o Gist audio player](https:\u002F\u002Ftools.simonwillison.net\u002Fgpt-4o-audio-player) play audio responses stored on GitHub Gist\n- [JSON schema builder](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-schema-builder) build JSON schemas with a visual editor\n\n## Miscellaneous\n- [Arena animated](https:\u002F\u002Ftools.simonwillison.net\u002Farena-animated) animated chart of the LMSYS Chatbot Arena\n- [California Clock Change](https:\u002F\u002Ftools.simonwillison.net\u002Fcalifornia-clock-change) see when daylight saving time changes\n- [Open Sauce 2025 schedule](https:\u002F\u002Ftools.simonwillison.net\u002Fopen-sauce-2025) browse the upcoming conference sessions\n- [OpenFreeMap demo](https:\u002F\u002Ftools.simonwillison.net\u002Fopenfreemap-demo) MapLibre demo with random points in San Francisco\n- [Progress of the US presidency](https:\u002F\u002Ftools.simonwillison.net\u002Fprogress) track days elapsed in the current term\n- [User Agent display](https:\u002F\u002Ftools.simonwillison.net\u002Fuser-agent) show your browser’s user agent string\n- [Encrypt \u002F decrypt message](https:\u002F\u002Ftools.simonwillison.net\u002Fencrypt) share short encrypted messages\n- [ARIA live regions](https:\u002F\u002Ftools.simonwillison.net\u002Faria-live-regions) demo of dynamic page announcements\n- [Prompts.js](https:\u002F\u002Ftools.simonwillison.net\u002Fprompts-js) small library for nicer JavaScript prompts\n- [APSW SQLite query explainer](https:\u002F\u002Ftools.simonwillison.net\u002Fapsw-query) explain SQLite queries using APSW\n\n## On Observable\n\nOn [Observable](https:\u002F\u002Fobservablehq.com\u002F):\n\n- [Blog to newsletter](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fblog-to-newsletter) helps turn blog posts into a newsletter\n- [Convert Claude JSON to Markdown](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fconvert-claude-json-to-markdown) for sharing Claude transcripts\n- [Hacker News homepage with links to comments ordered by most recent first](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fhacker-news-homepage)\n\n\u003Cscript type=\"module\" src=\"homepage-search.js\" data-tool-search>\u003C\u002Fscript>\n","# tools.simonwillison.net\n\n各种 HTML+JavaScript 工具，主要借助大语言模型构建。另请参阅 [\u002Fpython\u002F](https:\u002F\u002Ftools.simonwillison.net\u002Fpython\u002F)，其中包含使用 Python 编写的工具。\n\n本系列是一次低风险的提示驱动开发实验。\n\n[后记](https:\u002F\u002Ftools.simonwillison.net\u002Fcolophon) 列出了每个工具的提交信息和对话记录。\n\n代码托管在 [simonw\u002Ftools](https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools) 中，许多工具使用了此处描述的 Claude 自定义指令：[这里](https:\u002F\u002Fsimonwillison.net\u002F2024\u002FDec\u002F19\u002Fone-shot-python-tools\u002F#custom-instructions)。\n\n\u003C!-- 最近开始 -->\n\u003C!-- 最近结束 -->\n\n## 图片与媒体\n- [社交媒体裁剪器](https:\u002F\u002Ftools.simonwillison.net\u002Fsocial-media-cropper) 将图片裁剪为 2×1 比例，适合社交媒体分享\n- [图片尺寸与质量对比](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-resize-quality) 比较 JPEG 质量设置\n- [图片转 JPEG](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-to-jpeg) 将 PNG 或 WebP 文件转换为 JPEG\n- [图片转 SVG](https:\u002F\u002Ftools.simonwillison.net\u002Fimage-to-svg) 将位图图像描摹为 SVG 路径\n- [SVG 转 JPEG\u002FPNG](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-render) 将 SVG 渲染为栅格图像\n- [SVG 沙盒](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-sandbox) 安全显示解码后的 SVG 文件\n- [SVG 渐进式渲染](https:\u002F\u002Ftools.simonwillison.net\u002Fsvg-progressive-render) 观看 SVG 自动绘制过程\n- [边界框裁剪器](https:\u002F\u002Ftools.simonwillison.net\u002Fbbox-cropper) 绘制边界框并读取坐标\n- [掩码可视化器](https:\u002F\u002Ftools.simonwillison.net\u002Fmask-visualizer) 检查带有边界框的 JSON 掩码\n- [FFmpeg 裁剪助手](https:\u002F\u002Ftools.simonwillison.net\u002Fffmpeg-crop) 生成用于裁剪视频的 FFmpeg 命令\n- [TIFF 方向查看器](https:\u002F\u002Ftools.simonwillison.net\u002Ftiff-orientation) 检查 EXIF 方向元数据\n- [头像 Web 组件](https:\u002F\u002Ftools.simonwillison.net\u002Favatar-web-component) 在原地上传和裁剪头像\n- [YouTube 缩略图](https:\u002F\u002Ftools.simonwillison.net\u002Fyoutube-thumbnails) 列出视频的缩略图 URL\n\n## 文本与文档\n- [OCR](https:\u002F\u002Ftools.simonwillison.net\u002Focr) 在浏览器中识别图片和 PDF 中的文本\n- [PDF OCR](https:\u002F\u002Ftools.simonwillison.net\u002Fpdf-ocr) 对上传的 PDF 进行光学字符识别\n- [比较 PDF](https:\u002F\u002Ftools.simonwillison.net\u002Fcompare-pdfs) 可视化两个 PDF 之间的差异\n- [渲染 Markdown](https:\u002F\u002Ftools.simonwillison.net\u002Frender-markdown) 使用 GitHub API 将 Markdown 转换为 HTML\n- [HTML 预览](https:\u002F\u002Ftools.simonwillison.net\u002Fhtml-preview) 左侧输入 HTML，右侧实时显示渲染结果\n- [RTF 转 HTML](https:\u002F\u002Ftools.simonwillison.net\u002Frtf-to-html) 检查 RTF 剪贴板数据并将其转换为 HTML\n- [Markdown 数学](https:\u002F\u002Ftools.simonwillison.net\u002Fmarkdown-math) 实时预览包含 LaTeX 公式的 Markdown\n- [脚注实验](https:\u002F\u002Ftools.simonwillison.net\u002Ffootnotes-experiment) 演示将脚注链接到弹出窗口\n- [阅读时间计算器](https:\u002F\u002Ftools.simonwillison.net\u002Freading-time) 估算阅读一段文字所需的时间\n- [字数统计](https:\u002F\u002Ftools.simonwillison.net\u002Fword-counter) 统计多个文本块中的单词数量\n- [文本换行平衡导航](https:\u002F\u002Ftools.simonwillison.net\u002Ftext-wrap-balance-nav) 探索 `text-wrap: balance` 属性\n- [标题导航](https:\u002F\u002Ftools.simonwillison.net\u002Fnav-for-headings) 生成基于 ID 的目录\n- [粘贴富文本](https:\u002F\u002Ftools.simonwillison.net\u002Fpaste-rich-text) 检查剪贴板中的 HTML 和纯文本\n- [粘贴 HTML 子集](https:\u002F\u002Ftools.simonwillison.net\u002Fpaste-html-subset) 查看哪些标签在 HTML 净化后仍保留\n- [剪贴板查看器](https:\u002F\u002Ftools.simonwillison.net\u002Fclipboard-viewer) 调试剪贴板中存储的所有内容\n- [提取 URL](https:\u002F\u002Ftools.simonwillison.net\u002Fextract-urls) 从粘贴的 HTML 中提取链接列表\n- [JSON 转 Markdown 记录](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-to-markdown-transcript) 将记录 JSON 转换为 Markdown\n- [JSON 转 YAML](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-to-yaml) 在 JSON 和 YAML 格式之间进行转换\n- [YAML 浏览器](https:\u002F\u002Ftools.simonwillison.net\u002Fyaml-explorer) 以可折叠树形结构浏览 YAML 文档\n- [JSON 模式生成器](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-schema-builder) 可视化设计 JSON 模式\n- [不完整 JSON 打印](https:\u002F\u002Ftools.simonwillison.net\u002Fincomplete-json-printer) 美观地打印部分 JSON 文档\n- [PHP 反序列化工具](https:\u002F\u002Ftools.simonwillison.net\u002Fphp-deserializer) 将序列化的 PHP 数据转换为 JSON\n- [SQL 格式化工具](https:\u002F\u002Ftools.simonwillison.net\u002Fsql-pretty-printer) 重新格式化 SQL 查询以提高可读性\n- [Pipfile.lock 解析器](https:\u002F\u002Ftools.simonwillison.net\u002Fpipfile) 从 `Pipfile.lock` 中提取依赖版本\n\n## 数据与时间工具\n- [时间戳转换器](https:\u002F\u002Ftools.simonwillison.net\u002Funix-timestamp) 将 Unix 时间戳转换为可读日期\n- [时区](https:\u002F\u002Ftools.simonwillison.net\u002Ftimezones) 比较多个时区的时间\n- [日期计算器](https:\u002F\u002Ftools.simonwillison.net\u002Fdate-calculator) 计算日期之间的天数或仅计算工作日\n- [文件传输时间估算](https:\u002F\u002Ftools.simonwillison.net\u002Ftransfer-time) 计算文件传输所需时间\n- [Token 使用量计算器](https:\u002F\u002Ftools.simonwillison.net\u002Ftoken-usage) 按模型汇总 LLM 的 token 日志\n- [LLM 价格重定向](https:\u002F\u002Ftools.simonwillison.net\u002Fllm-prices) 快速链接到最新的模型定价网站\n- [CSV 标记地图](https:\u002F\u002Ftools.simonwillison.net\u002Fcsv-marker-map) 根据 CSV 文件在地图上绘制标记\n- [物种观测地图](https:\u002F\u002Ftools.simonwillison.net\u002Fspecies-observation-map) 浏览近期的 iNaturalist 观测记录\n\n## GitHub 与开发\n- [GitHub API 写入](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-api-write) 直接将文本或图片上传到仓库\n- [GitHub 问题查看器](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-issue) 获取 GitHub 问题和评论\n- [GitHub 问题转 Markdown](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-issue-to-markdown) 将问题线程转换为 Markdown\n- [Zip\u002FWheel 浏览器](https:\u002F\u002Ftools.simonwillison.net\u002Fzip-wheel-explorer) 查看 Python wheel 和 zip 文件的内容\n- [Ares 语音字母表](https:\u002F\u002Ftools.simonwillison.net\u002Fares) 将文本转换为 ARES 紧急语音编码\n- [与 Claude 一起编码 2025](https:\u002F\u002Ftools.simonwillison.net\u002Fcode-with-claude-2025) 原型化 Claude 编码的工作流程\n- [侧边栏对话演示](https:\u002F\u002Ftools.simonwillison.net\u002Fside-panel-dialog) 实验 HTML `dialog` 元素\n- [广播通道聊天](https:\u002F\u002Ftools.simonwillison.net\u002Fbroadcast-channel-chat) 使用 BroadcastChannel 在不同标签页之间聊天\n\n## Bluesky 和社交工具\n- [Bluesky WebSocket Firehose](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-firehose) 实时查看 Bluesky 上的动态\n- [Bluesky 解析 DID](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-resolve) 将类似 `simonwillison.net` 的句柄转换为 DID\n- [Bluesky 时间线](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-timeline) 查看用户的最新帖子和回复\n- [Bluesky 线程导出](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-thread) 将 Bluesky 线程保存为 Markdown 格式\n- [Bluesky 引用查找器](https:\u002F\u002Ftools.simonwillison.net\u002Fbluesky-quote-finder) 查找某条 Bluesky 帖子的所有引用\n- [活动策划器](https:\u002F\u002Ftools.simonwillison.net\u002Fevent-planner) 存储在 localStorage 中的简易日程规划工具\n- [无密码密钥演示](https:\u002F\u002Ftools.simonwillison.net\u002Fpasskeys) 体验基于浏览器的无密码密钥认证\n\n## 大模型 Playground 和调试工具\n- [Haiku](https:\u002F\u002Ftools.simonwillison.net\u002Fhaiku) 使用 Claude Haiku 和你的摄像头生成俳句\n- [Chrome Prompt Playground](https:\u002F\u002Ftools.simonwillison.net\u002Fchrome-prompt-playground) 在 Chrome 的 Gemini Nano 上运行提示词\n- [Gemini 边界框可视化器](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-bbox) 可视化 Gemini 返回的边界框\n- [Gemini 聊天客户端](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-chat) 用于 Gemini API 的简单聊天界面\n- [Gemini 掩码可视化器](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-mask) 将 Gemini 的分割掩码叠加显示\n- [Gemini 图像 JSON 渲染器](https:\u002F\u002Ftools.simonwillison.net\u002Fgemini-image-json) 展示来自 Gemini JSON 输出的图像\n- [Claude 令牌计数器](https:\u002F\u002Ftools.simonwillison.net\u002Fclaude-token-counter) 统计 Claude 提示词中的令牌数量\n- [OpenAI 音频输入](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-audio) 录制音频并发送给 OpenAI 模型\n- [OpenAI 音频输出](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-audio-output) 使用 OpenAI 的语音合成技术生成语音\n- [OpenAI WebRTC 演示](https:\u002F\u002Ftools.simonwillison.net\u002Fopenai-webrtc) 与 OpenAI 的实时音频 API 进行交互\n- [GPT-4o Gist 音频播放器](https:\u002F\u002Ftools.simonwillison.net\u002Fgpt-4o-audio-player) 播放存储在 GitHub Gist 上的音频响应\n- [JSON 模式构建器](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-schema-builder) 使用可视化编辑器构建 JSON 模式\n\n## 其他工具\n- [Arena 动画图](https:\u002F\u002Ftools.simonwillison.net\u002Farena-animated) LMSYS 聊天机器人竞技场的动画图表\n- [加州夏令时调整](https:\u002F\u002Ftools.simonwillison.net\u002Fcalifornia-clock-change) 查看夏令时调整的具体时间\n- [Open Sauce 2025 议程](https:\u002F\u002Ftools.simonwillison.net\u002Fopen-sauce-2025) 浏览即将举行的会议议程\n- [OpenFreeMap 演示](https:\u002F\u002Ftools.simonwillison.net\u002Fopenfreemap-demo) MapLibre 演示，包含旧金山随机点位\n- [美国总统任期进展](https:\u002F\u002Ftools.simonwillison.net\u002Fprogress) 跟踪当前总统任期已过去的天数\n- [用户代理显示](https:\u002F\u002Ftools.simonwillison.net\u002Fuser-agent) 显示你的浏览器的用户代理字符串\n- [消息加密\u002F解密](https:\u002F\u002Ftools.simonwillison.net\u002Fencrypt) 分享简短的加密消息\n- [ARIA 实时区域](https:\u002F\u002Ftools.simonwillison.net\u002Faria-live-regions) 动态页面公告演示\n- [Prompts.js](https:\u002F\u002Ftools.simonwillison.net\u002Fprompts-js) 一个用于美化 JavaScript 提示框的小型库\n- [APSW SQLite 查询解释器](https:\u002F\u002Ftools.simonwillison.net\u002Fapsw-query) 使用 APSW 解释 SQLite 查询\n\n## 在 Observable 上\n\n在 [Observable](https:\u002F\u002Fobservablehq.com\u002F) 上：\n\n- [博客转邮件列表](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fblog-to-newsletter) 帮助将博客文章转化为邮件列表\n- [将 Claude JSON 转换为 Markdown](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fconvert-claude-json-to-markdown) 用于分享 Claude 的对话记录\n- [按最新排序的 Hacker News 首页，附带评论链接](https:\u002F\u002Fobservablehq.com\u002F@simonw\u002Fhacker-news-homepage)\n\n\u003Cscript type=\"module\" src=\"homepage-search.js\" data-tool-search>\u003C\u002Fscript>","# tools.simonwillison.net 快速上手指南\n\n## 项目简介\n`tools.simonwillison.net` 是一个由 Simon Willison 创建的开源工具集合，包含大量基于 HTML 和 JavaScript 构建的实用小工具。这些工具主要利用大语言模型（LLM）辅助开发，涵盖图像处理、文档转换、数据可视化、GitHub 集成、社交媒体分析及 LLM 调试等多个领域。\n\n**特点**：\n- **纯前端运行**：绝大多数工具直接在浏览器中运行，无需后端服务器。\n- **零安装**：无需配置复杂的环境或依赖库。\n- **开源透明**：所有代码托管于 GitHub，并附带详细的开发日志（Colophon）。\n\n---\n\n## 环境准备\n\n由于该项目主要由静态 HTML 和 JavaScript 文件组成，对系统环境要求极低。\n\n### 系统要求\n- **操作系统**：Windows, macOS, Linux 均可。\n- **浏览器**：推荐使用最新版本的 Chrome, Firefox, Edge 或 Safari（需支持现代 ES6+ 语法及 Web Components）。\n\n### 前置依赖\n- **无强制依赖**：直接访问网页即可使用所有功能。\n- **可选依赖（仅用于本地开发\u002F修改源码）**：\n  - Node.js (v18+)\n  - Git\n\n---\n\n## 安装步骤\n\n本项目的核心使用方式是**在线直接使用**，无需传统意义上的“安装”。如果您希望本地部署或贡献代码，请参考以下步骤。\n\n### 方式一：在线使用（推荐）\n无需任何命令，直接访问官方站点即可：\n- **主站地址**: [https:\u002F\u002Ftools.simonwillison.net](https:\u002F\u002Ftools.simonwillison.net)\n- **Python 工具集**: [https:\u002F\u002Ftools.simonwillison.net\u002Fpython\u002F](https:\u002F\u002Ftools.simonwillison.net\u002Fpython\u002F)\n\n### 方式二：本地克隆源码（开发者适用）\n如果您需要在本地运行或研究代码：\n\n1. **克隆仓库**\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools.git\n   cd tools\n   ```\n\n2. **启动本地服务**\n   由于涉及模块化和 CORS 策略，建议通过本地 HTTP 服务器运行。\n   \n   *使用 Python (推荐):*\n   ```bash\n   python -m http.server 8000\n   ```\n   \n   *或使用 Node.js (需安装 http-server):*\n   ```bash\n   npx http-server -p 8000\n   ```\n\n3. **访问本地实例**\n   打开浏览器访问 `http:\u002F\u002Flocalhost:8000`。\n\n> **注意**：国内访问 GitHub 源码若速度较慢，可尝试使用国内镜像加速服务（如 `fastgit.org` 等）克隆仓库，但运行时仍建议直连官方源以获取最新功能。\n\n---\n\n## 基本使用\n\n所有工具均设计为“开箱即用”，以下是几个典型场景的使用示例：\n\n### 1. 图像与媒体处理\n**场景**：将图片裁剪为社交媒体所需的 2:1 比例。\n- **操作**：\n  1. 访问 [Social media cropper](https:\u002F\u002Ftools.simonwillison.net\u002Fsocial-media-cropper)。\n  2. 点击上传按钮选择本地图片。\n  3. 拖动裁剪框调整区域。\n  4. 点击 \"Download\" 下载裁剪后的图片。\n- **优势**：全程在浏览器完成，图片不上传至服务器，保护隐私。\n\n### 2. 文档与文本工具\n**场景**：提取 PDF 文件中的文字（OCR）。\n- **操作**：\n  1. 访问 [PDF OCR](https:\u002F\u002Ftools.simonwillison.net\u002Fpdf-ocr)。\n  2. 拖入或选择需要识别的 PDF 文件。\n  3. 等待浏览器自动处理，右侧将实时显示识别出的文本内容。\n  4. 复制文本或下载结果。\n\n### 3. LLM 调试与实验\n**场景**：统计 Claude 模型的 Token 消耗。\n- **操作**：\n  1. 访问 [Claude Token Counter](https:\u002F\u002Ftools.simonwillison.net\u002Fclaude-token-counter)。\n  2. 在左侧输入框粘贴您的 Prompt 或 API 响应内容。\n  3. 工具会自动计算并显示 Input\u002FOutput 的 Token 数量及预估成本。\n\n### 4. 数据格式转换\n**场景**：将 JSON 数据转换为 YAML 格式。\n- **操作**：\n  1. 访问 [JSON to YAML](https:\u002F\u002Ftools.simonwillison.net\u002Fjson-to-yaml)。\n  2. 在左侧粘贴 JSON 字符串。\n  3. 右侧即时生成对应的 YAML 格式，支持一键复制。\n\n### 5. 高级功能：GitHub 集成\n**场景**：直接将文本文件上传至 GitHub 仓库。\n- **操作**：\n  1. 访问 [GitHub API write](https:\u002F\u002Ftools.simonwillison.net\u002Fgithub-api-write)。\n  2. 输入您的 GitHub Personal Access Token (PAT)。\n  3. 填写目标仓库所有者、仓库名、文件路径及内容。\n  4. 点击提交，文件将直接写入您的仓库。\n\n---\n\n**提示**：每个工具页面底部通常包含 \"View source\" 链接，可直接跳转至该工具对应的单一源代码文件，便于学习和二次开发。","内容创作者小明在准备一篇技术博客时，需要处理大量截图、提取文档文字并优化排版格式。\n\n### 没有 tools 时\n- 手动使用 Photoshop 逐张裁剪图片以适应社交媒体比例，耗时且容易出错。\n- 遇到扫描版 PDF 中的文字无法直接复制，必须安装重型 OCR 软件或依赖在线付费服务。\n- 对比两个版本的 PDF 文档差异时，只能肉眼逐页查找，效率极低且易遗漏细节。\n- 将 Markdown 草稿转换为带数学公式的 HTML 预览时，需反复切换本地编辑器与浏览器刷新查看效果。\n- 从网页复制富文本到剪贴板后，难以查看其底层 HTML 结构，导致粘贴到 CMS 后台时常出现样式错乱。\n\n### 使用 tools 后\n- 利用 Social media cropper 一键将多张截图批量裁剪为 2:1 比例，瞬间完成社媒配图准备。\n- 直接在浏览器中通过 PDF OCR 工具上传文件，几秒钟内即可提取并复制扫描文档中的全部文字。\n- 使用 Compare PDFs 可视化高亮显示两份文档的差异点，快速定位修改内容，无需人工比对。\n- 借助 Markdown math 实时预览包含 LaTeX 公式的文章效果，边写边看，大幅减少调试时间。\n- 通过 Paste rich text 和 Clipboard viewer 即时 inspect 剪贴板中的 HTML 源码，精准清理冗余标签，确保发布样式整洁。\n\ntools 让原本繁琐的媒体处理与文档编辑工作流在浏览器内轻量化完成，显著提升了内容生产的效率与质量。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fsimonw_tools_7a3ef759.png","simonw","Simon Willison","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fsimonw_1c2d8190.jpg",null,"Datasette","Half Moon Bay, California","https:\u002F\u002Fsimonwillison.net\u002F","https:\u002F\u002Fgithub.com\u002Fsimonw",[82,86,90,94,98],{"name":83,"color":84,"percentage":85},"HTML","#e34c26",73,{"name":87,"color":88,"percentage":89},"JavaScript","#f1e05a",20.5,{"name":91,"color":92,"percentage":93},"Python","#3572A5",5.8,{"name":95,"color":96,"percentage":97},"Perl","#0298c3",0.5,{"name":99,"color":100,"percentage":101},"Shell","#89e051",0.2,1619,166,"2026-04-18T06:43:08","Apache-2.0",1,"未说明","不需要",{"notes":110,"python":108,"dependencies":111},"该工具集主要由 HTML 和 JavaScript 构建，直接在浏览器中运行，无需安装本地环境、Python 或 GPU。部分功能（如 OCR、Markdown 渲染）依赖浏览器内置能力或调用外部 API（如 GitHub API、LLM API）。",[],[15,113],"其他","2026-03-27T02:49:30.150509","2026-04-18T22:33:49.127381",[117,122,127,132,137,142,146],{"id":118,"question_zh":119,"answer_zh":120,"source_url":121},40700,"为什么 Claude Code 无法提交 PR 或创建 Issue？","这通常是因为缺少明确的工具权限或写入权限。解决方法如下：\n1. 在配置中显式允许相关工具：\n```yaml\nallowed_tools: |\n  mcp__github__create_pull_request\n  Bash\n  Bash(uv*)\n  Bash(npm:*)\n```\n2. 确保工作流具有写入级别的权限（默认可能仅为读取）：\n```yaml\npermissions:\n  contents: write\n  pull-requests: write\n  issues: write\n  id-token: write\n  actions: read\n```","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F36",{"id":123,"question_zh":124,"answer_zh":125,"source_url":126},40701,"OCR 工具支持哪些语言？如何为特定语言生成可分享的链接？","OCR 工具基于 Tesseract.js，支持多种语言（如简体中文 chi_sim、繁体中文 chi_tra、德语 deu、法语 fra 等）。为了支持特定语言的书签分享，已更新工具使其能够通过 URL 参数记录状态，现在浏览器的后退\u002F前进按钮和地址栏也能正常工作，您可以直接复制包含语言选择的 URL 分享给他人。","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F4",{"id":128,"question_zh":129,"answer_zh":130,"source_url":131},40702,"如何在网页中实现粘贴图片进行 OCR 识别的功能？","可以通过监听 `paste` 事件来实现。核心代码逻辑如下：\n```javascript\ndocument.addEventListener('paste', (event) => {\n    const items = (event.clipboardData || event.originalEvent.clipboardData).items;\n    for (const item of items) {\n        if (item.type.indexOf('image') !== -1) {\n            const blob = item.getAsFile();\n            const reader = new FileReader();\n            reader.onload = function(event) {\n                const imageUrl = event.target.result;\n                \u002F\u002F 将 imageUrl 用于后续 OCR 处理或显示\n            };\n            reader.readAsDataURL(blob);\n        }\n    }\n});\n```","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F7",{"id":133,"question_zh":134,"answer_zh":135,"source_url":136},40703,"使用 OCR 工具时，如果先上传图片再切换语言导致识别失败，该如何修复？","这是一个可用性问题。修复方案是修改代码，使得当语言选择框发生变化时，自动对页面上当前可见的任何图片重新运行 OCR 识别，替换文本区域中的内容，并更新顶部的全文本文本区域（如果存在）。维护者曾使用 LLM 辅助生成重写代码的逻辑：\"rewrite this code so when the select box for language is changed the OCR is re-run against any images currently visible on the page...\"","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F6",{"id":138,"question_zh":139,"answer_zh":140,"source_url":141},40704,"如何解决 date-calculator.html 中的布局错位问题？","布局错位通常是由 CSS 盒模型计算引起的。根本解决方案是添加通用的 CSS 规则，确保内边距和边框包含在元素尺寸内：\n```css\n* { box-sizing: border-box; }\n```\n此外，还需检查时间轴元素的圆角一致性（如统一为 8px）并为方法选项添加 `flex-wrap` 以增强响应式行为。","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F31",{"id":143,"question_zh":144,"answer_zh":145,"source_url":121},40705,"如何让 HTML 文件更好地支持屏幕阅读器（无障碍访问）？","需要将无语义的 \"div soup\"（大量嵌套的 div）替换为具有语义的 HTML 元素。具体修改示例包括：\n- 将 `\u003Cdiv class=\"session-card\">` 替换为 `\u003Carticle class=\"session-card\">`\n- 将 `\u003Cdiv class=\"session-header\">` 替换为 `\u003Cheader class=\"session-header\">`\n- 将 `\u003Cdiv class=\"session-title\">` 替换为 `\u003Ch2 class=\"session-title\">`\n- 将 `\u003Cdiv class=\"session-description\">` 替换为 `\u003Cp class=\"session-description\">`\n这些改动能显著提升屏幕阅读器的解析效果。",{"id":147,"question_zh":148,"answer_zh":149,"source_url":150},40706,"如何在项目首页动态展示“最近添加”和“最近更新”的工具列表？","需要在 `README.md` 或索引页面中预留标记位置（例如 `\u003C!-- recently starts -->` 和 `\u003C!-- recently stops -->`），然后通过脚本自动生成列表插入其中。列表中的日期应分别显示为：该文件第一次被提交的日期（最近添加）或最后一次被编辑的提交日期（最近更新），避免所有项目显示相同日期的错误。","https:\u002F\u002Fgithub.com\u002Fsimonw\u002Ftools\u002Fissues\u002F62",[]]