DEV Community: uni928

Turn Markdown into a Readable, Re-Editable HTML File

uni928 — Fri, 24 Jul 2026 03:55:54 +0000

I built a simple browser-based tool that converts Markdown into a clean, readable HTML file.

You can use it immediately by visiting the following page:

https://uni928.github.io/Uni928PublicHTMLs/index79.html

No installation, account registration, or development environment is required.

What This Tool Does

Write or paste Markdown into the editor, add an optional page title, and save the result as a standalone HTML file.

For example, you can enter:

## Completed

- Fixed the login screen
- Corrected a layout issue

## Under Review

- Mobile browser behavior
- Final accessibility checks

The tool converts this content into a visually organized page that can be opened directly in a web browser.

The downloaded file contains everything required to display the document, so you do not need a separate Markdown viewer.

The Saved HTML Can Be Edited Again

One useful difference from a typical Markdown-to-HTML converter is that the generated file is not limited to viewing.

When you open the saved HTML file, you can return to the editing screen, update the title or Markdown content, and save a new version.

This makes the file useful as a small self-contained document rather than a one-time export.

A simple workflow might look like this:

Create a report in Markdown.
Save it as an HTML file.
Place it in a shared folder.
Open the same file later.
Edit the original Markdown.
Save the updated version.

You do not need to keep a separate Markdown source file unless you want to.

Useful for Shared Folders

The generated HTML file can be placed in a shared team folder, cloud storage folder, USB drive, or local project directory.

Other people can read it simply by opening the file in a browser.

This can be useful because:

no document-viewing application is required
the result is easier to read than a plain text file
the content can still be updated using Markdown
only one HTML file needs to be shared
links, headings, lists, tables, quotes, and code blocks can be displayed clearly

Possible Use Cases

The tool is suitable for lightweight documents such as:

work reports
project status pages
meeting notes
checklists
setup instructions
internal manuals
reference link collections
handover documents
personal notes

It is especially useful when a full document management system would be excessive, but a plain text file would be difficult to read.

How to Use It

Open the tool:

https://uni928.github.io/Uni928PublicHTMLs/index79.html

Then:

Enter a page title.
Write or paste your Markdown.
Preview the formatted page in the browser.
Save it as a readable HTML file.
Reopen the saved file whenever you need to view or edit it.

The generated file can start either in viewing mode or editing mode, depending on the save option you choose.

Supported Markdown Elements

The tool supports commonly used Markdown formatting, including:

headings
bold and italic text
ordered and unordered lists
task lists
blockquotes
links
images
horizontal rules
code blocks
inline code
tables

The goal is not to replace a full Markdown publishing system, but to make everyday Markdown documents easy to read and share.

Summary

This tool provides a simple middle ground between a plain Markdown file and a full document platform.

You can write in Markdown, export the content as a readable standalone HTML page, share it as a single file, and edit the same file again later.

Try it here:

https://uni928.github.io/Uni928PublicHTMLs/index79.html

A Button Showcase with One-Click HTML Copy

uni928 — Fri, 24 Jul 2026 03:40:59 +0000

When building a website, choosing a button design can take more time than expected.

You may want something simple, soft, colorful, dark, outlined, or slightly unusual—but comparing many styles usually means repeatedly editing CSS and refreshing the page.

To make that process easier, I created a browser-based button showcase.

Try It Online

You can use it directly from the following page:

https://uni928.github.io/Uni928PublicHTMLs/index78.html

There is nothing to install. Open the page, browse the available designs, and choose a button you like.

Many Button Styles in One Place

The page includes a wide range of button designs, including:

Light and subtle buttons
Solid-color buttons
Dark buttons
Gradient buttons
Outline buttons
Rounded and pill-shaped buttons
Buttons with icons
More experimental designs

The buttons are displayed as actual interactive elements, so you can compare their hover, focus, and pressed states directly in the browser.

Click a Button to Copy It

The main feature of this tool is its copy workflow.

Clicking a button copies a minimal HTML example for that design. This makes it easier to take only the button you need instead of copying the entire showcase page.

The generated example includes the necessary HTML and CSS, so it can be pasted into a new file and tested immediately.

Copy Features for Faster Comparison

The site also includes additional copy-related features to make browsing a large number of designs more convenient.

You can:

Copy a button directly by clicking it
Review the generated code
Copy frequently used button types from the quick-copy panel
Receive visual feedback after a successful copy
Use copied examples as standalone HTML files

This is especially useful when you want to compare several designs before deciding which one to use in a project.

Useful for Prototypes and Small Projects

This tool is intended for situations where you need a usable button quickly, such as:

Creating a prototype
Building a small static website
Testing a landing page design
Comparing color combinations
Looking for CSS design ideas
Preparing a GitHub Pages project

The copied code can also be used as a starting point and customized for your own interface.

Final Thoughts

This is not a complete UI framework. It is a practical collection of button ideas with a copy-focused workflow.

Rather than searching through documentation or manually rebuilding a design, you can open the page, choose a button, and copy a small working example.

Try it here:

https://uni928.github.io/Uni928PublicHTMLs/index78.html

Practical baseline safeguards for ChatGPT-powered services

uni928 — Fri, 13 Feb 2026 04:21:16 +0000

Practical baseline safeguards for ChatGPT-powered services

When building an application using the OpenAI API, it is tempting to ship as soon as “it works.”
However, insufficient safeguards often lead to API key leakage, unexpected traffic spikes, and ultimately serious billing incidents.

This article summarizes practical, lightweight protections that are especially relevant for:

personal projects
internal tools
early-stage prototypes

These are not universal requirements.
What counts as a “baseline” depends heavily on your threat model, user anonymity, billing model, and scale.

A common but underestimated risk

One frequently overlooked risk is direct access to your backend API endpoints, bypassing the UI entirely.

In practice, incidents may also be caused by:

abuse by authenticated users
bugs or retry loops
misconfigured proxies or shared environments

However, direct scripted access to your backend is a very common failure mode, especially when no safeguards exist.

If an attacker can replay the exact same request your frontend sends, they can often exhaust your usage limits in minutes.

This article therefore focuses primarily on protecting your backend (Workers / server) rather than the UI.

Never call the OpenAI API directly from the client

Your frontend should never call the OpenAI API directly.

API keys embedded in browsers or apps will leak
DevTools, network inspection, and modified requests make this trivial

Recommended architecture

Client → Your backend (Workers / server)
Backend → OpenAI API

The client receives only the processed result.

This allows you to:

keep API keys secret
validate and throttle requests
support streaming safely

OpenAI explicitly recommends this approach in its official documentation.

Always implement rate limiting

Rate limiting is essential, even for small projects.

Typical limits include:

per 5 minutes
per hour
per day

Implementation can be simple:

store a counter
store the start time of the window

Cloudflare Workers with KV, Durable Objects, or D1 make this straightforward using IPs, user IDs, or session identifiers.

Lightweight one-time tokens (with clear limitations)

To discourage trivial scripted abuse, you may introduce short-lived request tokens.

For example:

embed an encrypted timestamp
validate that it was generated recently (e.g., within 10 seconds)

⚠️ Important limitations

This is not cryptographically strong authentication
This does not fully prevent replay within the valid window
This must never replace proper authentication

Think of this as friction, not security.

It is useful against:

naive replay scripts
casual scraping
low-effort abuse

It is not sufficient against a determined attacker.

Review auto-recharge and billing assumptions carefully

Billing incidents are often underestimated.

There are real-world reports of:

usage continuing briefly after limits were reached
negative balances appearing despite prepaid setups

Budget limits should be treated as operational safeguards, not hard guarantees.

For small projects, consider:

disabling auto-recharge
keeping balances low
adding monitoring and alerts

Using a dedicated debit card with a low limit can further cap worst-case damage.

Production services require real authentication

The measures above are suitable for:

prototypes
internal tools
anonymous experiments

For real services, you will need:

OAuth or equivalent authentication
session and token management
per-user quotas and permissions

IP-based checks alone are insufficient, as client-side values can be forged.

Defense must be layered: authentication, rate limits, quotas, and monitoring.

Never let the client choose the model

Model selection directly affects cost.

Best practice:

fix allowed models on the server
reject anything outside a strict allowlist

Do not rely on obscurity or “confusion” tactics.
Clear validation and rejection are safer, simpler, and easier to operate.

Conclusion

For small-scale ChatGPT-powered services, the following baseline practices already eliminate many real-world incidents:

keep API keys on the server
enforce rate limits
treat billing controls realistically

These measures will not make your system unbreakable — but they raise the cost of abuse enough that most attackers move on to easier targets.

Security is not about perfect defenses, but about making misuse inconvenient and uneconomical.

Original Japanese article (source of revision): https://qiita.com/uni928/items/061432019b316e418902

[ChatGPT Blender] How to Work Around the BlenderGPT Error

uni928 — Fri, 15 Aug 2025 03:22:06 +0000

BlenderGPT may sometimes fail to work properly.
One of the main causes is that the ChatGPT API Key input field cannot read beyond the 128th character.

Workaround Steps

After installing the add-on, go to Blender’s add-on settings screen, click the “folder” icon, and open the add-on’s installation folder.
Open the __init__.py file in Notepad or another text editor.
Search for openai.api_key and enter your API Key directly in its declaration.

Operation Check

Applying the above fix will allow BlenderGPT to function normally.

That concludes our guide on how to work around the BlenderGPT malfunction.
Thank you for reading.

I’ve created a web tool to batch add update dates at the beginning of filenames

uni928 — Mon, 21 Jul 2025 01:53:17 +0000

Have you ever had to add update dates at the start of filenames?

For example, in some companies there are rules like:

“When uploading files to a shared folder, please add the update date at the beginning of certain filenames.”

However, when dealing with many files, this task can be surprisingly tedious and time-consuming.

Renaming each file manually every time is stressful, isn’t it?

To solve this, I developed a web tool that can process all files in a folder at once and automatically add the update date.

Since it runs in your browser, there’s no need to install anything—you can use it right away.

Please give it a try!

🌐 Try it here

💡 Use Cases

This tool is useful in the following scenarios:

✅ When you want to add dates before uploading files to a shared drive or Google Drive

✅ When you need to organize multiple files like monthly or weekly reports where update dates are important

✅ When you want to automate renaming instead of manually editing filenames one by one

✅ When you want to replace old dates in filenames with the latest update date

🛠 How to Use

１. Click the “Select Folder” button

Use your browser’s File System Access API to select the folder you want to process. (Subfolders are not included.)

２. Automatically process all files in the folder

If a date in “YYYYMMDD” format already exists at the beginning, it will be removed and replaced with the current update date.

The original files remain untouched; new copies with updated dates are created.

３. Check the results

After processing, new files like “20250717filename.txt” will appear in the folder.

🚨 Notes:

This tool only works in browsers that support the File System Access API, such as Google Chrome or Microsoft Edge.

For safety, subfolders are excluded from processing. If you accidentally select something like the C drive, it could cause serious problems—this is why the tool is limited to the selected folder only. Even with an internal blocklist, including subfolders still carries too much risk.

The tool creates copies with the update date added. Note that the “last modified” date inside the copied files will be the date they were duplicated. Please understand this limitation.

🌐 Try it here

👉 Open the tool

If you’d like to verify its safety before using, you can also download it from here and inspect the code yourself.

That’s all for the introduction of this web tool for batch adding update dates to filenames.

I hope this tool helps you streamline your workflow.

Thank you for reading until the end! 🙌

P.S.

This article was proofread using ChatGPT.

Apologies if you’re not a fan of AI-assisted editing.

I Created a Website That Helps You Easily Generate ChatGPT Prompts for Blender Python API Code

uni928 — Wed, 16 Jul 2025 04:19:58 +0000

Did you know you can use ChatGPT to generate Blender Python API code when creating models in Blender?

These days, ChatGPT has become so accessible that you can start using it instantly—no account required.

For example, if you want to “create a food stall”, you can ask ChatGPT to write code that automates the process of building the framework in Blender.

And if you’re using the ChatGPT mobile app, you can even take a photo of a real-world object and say:
“I want to create a 3D model like this image.”

Surprisingly often, you’ll get a result close to what you envisioned.

But… do you ever feel stuck?
Many Blender users might think:
“I don’t know how to ask ChatGPT the right way...”

That’s why I created a simple website where you just type what you want to generate in a text box, and it automatically converts your input into what I believe is a well-structured, effective prompt.

👉 Here’s the site

✨ How It Works
The usage is super simple.

For example, enter something like this:

Japanese Festival Set
  - Food stalls (takoyaki, goldfish scooping, shooting gallery)
  - Lanterns, curtains, and signboards
  - Mini-game props (goldfish buckets, balloon dolls)

The site will then generate the following prompt and copy it to your clipboard automatically:

# Blender Python API Generated Code
# Please write this code with as much quality as possible to meet the requirements below

import bpy

# User instructions:
# Japanese Festival Set
  - Food stalls (takoyaki, goldfish scooping, shooting gallery)
  - Lanterns, curtains, and signboards
  - Mini-game props (goldfish buckets, balloon dolls)

# TODO: Implement high-quality processing here
# Example: create objects, apply settings, handle animations, etc.

When you feed this prompt to ChatGPT, you’ll likely get a much more accurate and higher-quality response compared to a normal query.

💡 In Summary
If you want to boost your Blender workflow, definitely give this tool a try.
You’ll quickly realize:
“The way you ask questions can completely change the quality of AI’s answers!”

🙏 Thank you for reading!

Once again:
👉 Here’s the site

🎉 A Web App to Bulk Copy “Related Files” in a Folder with Drag & Drop

uni928 — Mon, 14 Jul 2025 03:57:35 +0000

Today, I’d like to introduce a web app that can instantly find and copy all files in a folder containing the name of a file you drag & drop. (I’ll explain the details below.)

With this web app, you can quickly list out which files reference a dreaded file like CommonFunctionA.cs.

By listing all related files, it also makes it much easier to ask questions to ChatGPT.

💡 What Can It Do?

Imagine you have the following folder structure:

FolderA
├── FolderB
│   ├── aaa.txt
│   └── bbb.txt
├── ccc.txt  ← drag & drop
└── ddd.txt

When you drag ccc.txt into the browser, the app performs these actions:

✅ Recursively searches within the folder

✅ Extracts all files that contain the string ccc in their content

✅ Copies the file names and their contents to the clipboard in bulk

📝 Technical Highlights

🚀 File System Access API

This app uses the File System Access API to explore the contents of your local folders directly from the browser.

✅ Recursive folder search

✅ Bulk copy using the Clipboard API

🎯 Summary

With just drag & drop, you can bulk copy all “related files,”

making it perfect for large-scale local text searches or as a code review assistant.

Note: It does not copy “related files of related files.”

While it’s possible to implement this, doing so could result in copying the entire folder due to chain references.

Also, I’ve been debating whether such a web app should include itself (the dragged file) in the output. (Currently, it doesn’t.)

Including it might make it more user-friendly, but from the perspective of “who is using CommonFunctionA.cs?”, it seems more accurate to exclude it.

📌 Links

Original Version:

https://uni928.github.io/DirectoryInFileAllCopy/index5.html

Updated Version (Includes Self):

https://uni928.github.io/DirectoryInFileAllCopy/index6.html
I decided to release this version too since it’s more convenient when asking ChatGPT questions.

Source Code (for local use and safety checks):

https://github.com/uni928/DirectoryInFileAllCopy

Feel free to download it and try it out locally!

I Built a Convenient but Extremely Dangerous Website That Can Bulk Replace All Files in a Specified Folder

uni928 — Fri, 11 Jul 2025 03:33:05 +0000

Have you ever needed to replace text across all files in a folder at once? For example:

・Updating old API keys scattered across multiple files
・Performing large-scale renaming in HTML/CSS/JS projects
・Replacing specific phrases in Markdown or text logs in bulk

Normally, tasks like these require specialized apps (like VSCode’s regex replace) or command-line tools (sed, awk, find, grep, etc.), which can be intimidating for beginners.

So I thought:

“Couldn’t this be done more simply, directly in a browser?”

That’s why I created this site.

🚀 Features of This Site

This tool recursively scans all text files in a specified folder and replaces the search string in bulk.
Best of all, it runs entirely in the browser. No installation needed. Works across platforms.

✅ Key Features

・Select folders via drag & drop
・Processes files in subdirectories as well
・Automatically skips binary files (images, audio, etc.)
・Detects garbled text and excludes suspicious files
・Optionally creates a ZIP backup before replacements

🔥 Supported Browsers

・Google Chrome
・Microsoft Edge
　　(Not supported on Safari or Firefox because they don’t support the File System Access API)

🛡 How to Use Safely

・First, try it on a test folder
・Always enable the backup (ZIP) option

👨‍💻 Technical Background

This tool leverages File System Access API and JSZip:
・File System Access API
　　・Next-gen API that enables browsers to read/write local files
　　・Works in the latest versions of Chrome and Edge
・JSZip
　　・A JavaScript library for ZIP compression and decompression
・Garbled Text Detection
　　・Filters out files by calculating the ratio of invisible characters or replacement characters (�)

Thanks to these technologies, it’s possible to perform bulk replacements with nothing but a browser—no installations required.

📥 Try It Out

If you’re interested, give it a try:
It’s super handy, but use with caution!

👉 https://uni928.github.io/ReplaceAllFileAtOneDirectory/index2

Want to check for any suspicious behavior? Download the source code here:

👉 https://github.com/uni928/ReplaceAllFileAtOneDirectory

🙏 Finally

This tool fulfills the need for “simple bulk replacement,” but misuse can instantly corrupt your files.
(If replacements go wrong and are applied to production environments, bugs may occur. Backups are highly recommended.)

Use it on production folders at your own risk.

🧩 I Built a Simple Tool to Merge Excel Files — the Lazy Way

uni928 — Wed, 02 Jul 2025 04:54:43 +0000

Introduction

Merging multiple Excel files into one — it’s probably more common in the workplace than we’d like to admit.

For example:
・Sales reports from different departments
・Daily CSV log files
・Survey results filled out by different team members

You’ve likely heard (or said) this before:

　“Can you just combine them all into one file?”

But opening each file and copy-pasting manually is a pain.
Writing VBA macros is annoying.
Spinning up Python with pandas just for this? Also overkill.

🎉 So I Built a "Lazy Merge" Tool for Excel

I created a lightweight web tool where you can simply drag and drop multiple Excel files into your browser, and the tool merges them all and copies the result to your clipboard.

✅ No installation required — runs entirely in your browser
✅ Supports .xlsx, .xls, .xltm, and .csv
✅ Automatically extracts the first sheet of each file
✅ Combines the data into one and copies it instantly
✅ Paste into Excel — merge complete!

Perfect for quick tasks, admin work, or when you just want to get it done.

💡 How to Use It

It’s dead simple:

Open the site (either hosted or saved locally)
Drag & drop multiple Excel files at once (.csv, .xltm, etc.)
Click the 📋 Copy All button
Open a new Excel file and paste the result

That’s it! 🎉
The merged content is handled as tab-separated values (TSV), so the result is cleanly formatted when pasted into Excel.

🔧 What’s Under the Hood?

This tool is built with:

・HTML + JavaScript (frontend only)
・SheetJS(xlsx) for parsing Excel/CSV files
・FileReader API for reading files in-browser
・Clipboard API for copying to clipboard

Everything runs locally in your browser.
✅ No server
✅ No uploads
✅ Your data stays on your machine.

🧪 After Using It Myself...

Originally, I built this tool thinking,

　“I just want a quick little utility for myself.”

But it turned out to be so useful, I’ve kept it around and even shared it with coworkers.

・No more VBA or macro maintenance
・No code — anyone can use it
・Everything self-contained in a single HTML file

If you’re looking for a no-frills, anyone-can-use tool — this is it.

✅ Summary

・I built a simple browser-based tool to merge Excel/CSV files
・Just drag & drop → click → paste. Done.
・Works offline, no installation needed
・Handles .xltm and other formats thanks to SheetJS

Whether you're in admin work, data processing, education, or just looking to save time —
I hope this helps!

🙏 Final Note

If you found this tool or article helpful,
feel free to leave a like or a comment — I’d really appreciate it!

Thanks for reading!

🔗 Try it here

I Created a Tool to Copy All Files in a Folder to Your Clipboard

uni928 — Wed, 02 Jul 2025 04:01:34 +0000

Introduction

When working with ChatGPT or other LLMs (Large Language Models), you may find yourself needing to paste the names and contents of all files in a directory into a prompt — more often than you’d expect.

For example:

・When you want GPT to understand the structure of an entire codebase
・When analyzing a project that includes multiple templates or config files
・When summarizing a folder full of Markdown or text documents
・When previewing content before running a batch job
・When quickly documenting a local folder that isn’t under version control

In all these cases, “showing the content itself” becomes valuable input to the AI or to your workflow.

The Tool

To solve this, I built a simple web-based tool that lets you:

👉 Select a folder
👉 Recursively read all files inside
👉 Copy their filenames and contents into your clipboard

No installation. No account. Runs entirely in the browser.
Try it here:

🔗 https://uni928.github.io/DirectoryInFileAllCopy/index2.html

If you'd like to inspect or run it locally before using, you can also download it from here.

How to Use

Visit the site linked above
Click the “Select Folder” button
Choose the folder you want to copy and click OK
Within a few seconds, the contents of all valid files will be copied to your clipboard!

⚠️ Files with certain extensions like .meta are automatically excluded. You can customize which extensions are skipped if needed.

Technical Background (briefly)

This tool uses the File System Access API, with the following conditions:

・Works on Chromium-based browsers (Chrome, Edge, Brave, etc.)
・Only available over HTTPS or on localhost
・Folder access requires explicit user interaction due to browser security policies

Internally, it recursively traverses the folder, reads each file as text, formats it into a single string, and copies it using navigator.clipboard.writeText().

Advanced Use Cases

This tool isn’t just for copying — it unlocks a variety of workflows:

・Quickly pasting an entire codebase into an LLM for inspection
・Pre-processing local files for use with a full-text search engine
・Reviewing folder structure and contents before documentation
・Validating file contents during pre-deployment (CI/CD) steps
・Creating a single “context string” to tell GPT:
　　"Here's everything in this project — please summarize or answer questions."

With a single click, what was previously a pile of local files becomes rich, promptable text data.

Final Thoughts

That’s it — a simple but useful site for copying the names and contents of all files in a folder to your clipboard.

Once you try it, you might realize just how often you’ve wanted a tool like this to "just show me everything at once."

I hope this becomes a handy part of your workflow.
And if you find it helpful, I’d really appreciate it if you share it with others!

Thanks for reading 🙌

Notes

This article was polished using ChatGPT.
Apologies if you prefer human-only writing — I’m always open to feedback.

To be honest, I initially didn’t think this site would work, given how restrictive HTML and browser APIs can be.
But to my surprise, it actually works — and quite smoothly!

That said, please note that this feature might stop working in the future due to potential changes in browser specifications.
I appreciate your understanding in that regard.

I Created a Simple Tool to Instantly Preview HTML Generated by ChatGPT

uni928 — Tue, 24 Jun 2025 05:40:23 +0000

Introduction

ChatGPT has become a powerful ally for generating HTML and other code snippets. However, if you’ve ever tried working with the HTML code it outputs, you might have run into a small but persistent annoyance.

To preview the HTML, we typically need to:

・Manually create an .html file
・Open it in a text editor and paste in the code
・Save the file and open it in a browser
・Repeat this every time we make a small change

This process may not be complex, but doing it repeatedly can become surprisingly tedious.

A Simple Solution

To reduce that friction, I created a small web tool that lets you paste HTML code and instantly render it in the browser—without saving any files.

🔗 Try it here

How to Use

Copy the HTML code generated by ChatGPT
Paste it into the input field on the tool’s page
Click the “Render” button

That’s it. The entire page will be temporarily replaced with your HTML content. No need to create or save any files manually.

Error Handling Is Friendly Too

This tool uses document.write() to replace the document with your input. If your code contains syntax errors, the browser will usually provide helpful messages, and the line numbers in the console log remain consistent with your input. This makes debugging a bit easier as well.

Conclusion

Opening and saving HTML files manually each time you want to make a change might seem trivial at first. But over time, it adds up and slows you down—like a slow-draining battery.

With this tool, I hope to make your workflow just a little more efficient and enjoyable.

It's available on GitHub, so I'd be happy if you could download it and place it on your desktop.

Thank you for reading, and happy coding!

🛠 I Created a Simple Prompt Generator for ChatGPT! (Free Online Tool)

uni928 — Mon, 23 Jun 2025 05:17:37 +0000

If you're someone who writes prompts manually every time you ask ChatGPT to solve an error… you're not alone.

To help with that, I built a tool that lets you generate ChatGPT prompts automatically in just 3 steps.
Feel free to give it a try!

👉 Click here to try the prompt generator

👉 In the case of HTML, this one might work.

🧰 What Is This Tool?

This is a web-based tool that automatically generates a ChatGPT-friendly prompt based on:

・🐞 Your error message
・📄 The relevant source code file (via file upload)

The generated prompt follows this structure:

Could you tell me the cause of the following error and how to fix it?

[Error Message]

The content of the related file is as follows: 'filename'

[File content with line numbers]

If there are any key points or important notes about the error, please include those as well.

✅ Key Features

・Automatic Line Numbers for Code
　When you include line numbers in your code, ChatGPT can understand context much more accurately.
　It helps ChatGPT clearly identify lines like "the error is on line 18" and provide better answers.

・One-Click Prompt Copy
　You can copy the entire generated prompt with a single click of the "Copy Prompt" button.

・File Upload Support
　Works with almost any text-based code file — including JavaScript, TypeScript, Python, HTML, CSS, and more.

🚀 How to Use (3 Easy Steps)

Paste Your Error Message (optional)
　It’s not required, but including it will improve the accuracy of ChatGPT’s response.
Select Your Source Code File
　Just upload the relevant file — the tool will automatically display it with line numbers.
Click “Copy Prompt” and Ask ChatGPT!
　Paste it into ChatGPT and you're ready to go.

🎯 Who Is This For?

・Developers who are tired of writing prompts from scratch every time
・People looking for reusable prompt templates
・Beginners who want to learn efficiently with the help of AI

💡 Technical Details (for Developers)

This tool is built using plain HTML + JavaScript (Vanilla JS) and utilizes:

The FileReader API to load files locally

Automatic insertion of line numbers for code

The navigator.clipboard.writeText() API for copying text

Clean and simple UI using only basic HTML/CSS (no frameworks)

It's hosted on GitHub Pages, so you can use it instantly — no setup required.

Note:
If you are concerned about potential data leakage, we recommend downloading the index2.html file from GitHub Pages and running it locally. Before doing so, you can copy and paste the source code into ChatGPT to check whether it contains any code that sends data externally.

Since this tool is publicly hosted on GitHub Pages, any attempt to include such data-extracting functionality would be easily detected by inspecting the source code, so we hope this offers some peace of mind.

🙌 Final Thoughts

If this tool makes writing prompts even a little easier, and helps you make better use of ChatGPT, I’d be thrilled.

Feel free to leave feedback or suggestions in the comments!

👉 Try the Prompt Generator

👉 In the case of HTML, this one might work.