DEV Community: uni928

A Simple API Pricing Simulator for Estimating LLM Costs(Free to use)

uni928 — Wed, 23 Sep 2026 03:48:48 +0000

When using an AI API, even small differences in input tokens, output tokens, or the number of requests can significantly affect the total cost.

I created a simple browser-based API Pricing Simulator to make these calculations easier.

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

What It Can Calculate

The simulator calculates estimated API costs for multiple models based on:

Input tokens
Output tokens, including reasoning tokens
Number of requests per day
A specific number of requests

The results are divided into three tables:

Cost per Request
Monthly Cost (30 Days)
Cost for a Specific Number of Requests

The daily and monthly summary also shows the estimated request count, such as:

1,000 requests/day
30,000 requests / 30 days

Compare Multiple Models

The tool displays estimated costs for multiple AI models in the same table.

This makes it easier to compare how much the same workload may cost depending on the model you choose.

The calculation formula is also displayed, so the result is not just presented as a final number.

Share the Same Calculation with a URL

The Copy URL button creates a URL containing the current input values.

This is useful when you want to:

Share a cost estimate with someone else
Keep a specific calculation for later
Compare several usage scenarios

No installation is required. Everything runs directly in the browser.

Try It

API Pricing Simulator:

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

I made this mainly as a small utility for quickly estimating API costs before implementing or scaling an AI-powered feature.

For Those Who Want to Review the Code or Prioritize Security

👇 GitHub

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index14English.html

The GitHub source code is available for anyone who would like to inspect it themselves and check whether it contains any malicious or suspicious code.

While this does not guarantee a comprehensive security review, another option is to provide the code to ChatGPT or a similar AI tool and ask it to check for potentially malicious behavior, suspicious network requests, or other security concerns before running it locally.

Reduce Repeated HTML Traffic~Toward the Ultimate Lightweight Site~(Includes makng site)

uni928 — Thu, 17 Sep 2026 04:45:49 +0000

When publishing a site that claims to be lightweight, relying entirely on the browser cache may not be ideal if users are expected to open the HTML site repeatedly.

Because caching is not fully controlled by the site itself, the actual amount of data transferred may be higher than the developer expects.

As a mechanism that can be controlled by the site, I created a system that saves the main HTML document to IndexedDB on the first visit and restores it from IndexedDB on subsequent visits.

The browser cache can still provide its usual benefits.

For a practical implementation, I recommend providing both a regular version and a version designed to reduce traffic on subsequent visits. Most users can use the regular version, while frequent users can be guided to the traffic-reduction version.

Here is a working sample:

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

Github Main

Github OneTimeVisit

I created this by taking https://uni928.github.io/Uni928PublicHTMLs/index80English3.html, making a few minor adjustments, and then applying the process I am introducing here.

Here is the tool for creating this type of site:

https://uni928.github.io/Uni928PublicHTMLs2/index23MakingEnglish.html

GitHub

How it works

The structure consists of two files. The index portion can be replaced with any filename.

index.html
indexBody.html

The general flow is as follows:

Open index.html
  ↓
Check IndexedDB
  ↓
If saved, restore the HTML from IndexedDB
  ↓
If not saved, navigate to indexBody.html
  ↓
Save the main HTML document to IndexedDB
  ↓
Return to index.html

In other words, the large main HTML document is normally loaded only on the first visit.

On subsequent visits, the browser loads a lightweight restoration page and displays the main site from IndexedDB stored in the browser.

A tool for creating the files

The tool can convert a regular HTML file to this format. Simply drag and drop an HTML file, enter the desired filename, and download the result.

The tool generates these two files in a ZIP archive:

chosen-name.html
chosen-nameBody.html

The generated files use the name you specify in place of chosen-name.

Important considerations

IndexedDB is managed per origin, so the two files should generally be hosted on the same domain.

Even when the main HTML document is restored from IndexedDB, requests for external images, CSS, JavaScript, and other resources will still occur separately.

For this reason, the approach appears particularly suitable for:

Sites that are close to a single-HTML structure
Sites with a relatively large HTML document
Use cases where the same page is opened repeatedly

Summary

This approach reduces repeated transfers of the main HTML document by fetching it only on the first visit and restoring it from IndexedDB thereafter.

Service Workers can also be used for similar purposes. This implementation uses a relatively simple two-file plus IndexedDB structure.

Share Discord. One-Click Viewing for Recipients, No File Upload Required.(Free to use)

uni928 — Wed, 16 Sep 2026 03:31:22 +0000

This article introduces a simple document-sharing method that benefits both sides:

Recipients can view formatted documents with one click.
The person sharing the document does not need to upload a file.

The process is simple.

Markdown created with AI is compressed and encoded in Base64, then embedded in a URL. A Discord-ready message is automatically generated in the following format:

[View the document](<URL containing the compressed and Base64-encoded Markdown>)

When shared on Discord, the recipient sees only a simple link such as “View the document.”

By clicking the link, the recipient can view the Markdown as a formatted document, including headings, bold text, bullet points, and other formatting.

You can choose from multiple fonts. Disable Japanese fonts if necessary.

Sample

(For illustration only. Actual text use under 1,920 characters and use the []() format.)

GitHub

How to Share a Document

First, visit the website below. You can use it simply by accessing the site—no login or installation is required.

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

Next, ask ChatGPT or another generative AI to create a document in Markdown format.

For example, you can ask:

Please create a simple document in Markdown format that can be shared on Discord about [topic].

Paste the generated Markdown.

Clicking “Save in URL” creates a Discord-ready link in the following format:

[View the document](<URL containing the compressed and Base64-encoded Markdown>)

The generated text is copied to your clipboard.

You can then paste it directly into Discord.

Instead of displaying the full, lengthy URL, Discord shows it as a simple link such as “View the document.”

Discord Allows You to Give Links a Name

Discord supports Markdown links in the following format:

[View the document](<URL>)

For example:

[View the document](<URL containing the compressed and Base64-encoded Markdown>)

When you post this message, the recipient sees it as a link labeled “View the document.”

This makes it possible to share even very long URLs with a clean and simple appearance on Discord.

Store AI-Generated Markdown Inside a URL

The website introduced in this article compresses the Markdown text, encodes it in Base64, and embeds the resulting data in the URL.

The sharing process is therefore:

Ask ChatGPT or another AI to create a document in Markdown format.
Paste the Markdown into the website.
Create a sharing URL.
Paste the generated message into Discord.

In other words, you can let someone view a document using only a URL, without creating or uploading a separate Markdown, PDF, or HTML file.

This makes it possible to go from creating a document with ChatGPT to sharing it on Discord with relatively few operations.

Fewer Steps Than Conventional Document Sharing

Generative AI tools such as ChatGPT make it easy to create explanations, instruction manuals, and simple reports in Markdown format.

However, sharing such documents on Discord may sometimes require additional steps, such as:

Saving the content as a Markdown file
Converting it to HTML or PDF
Uploading the file to Discord
Moving it to Google Docs or another document service

With this method, the Markdown is stored directly inside the URL instead.

For a simple text-based document, you can share it with a short message such as:

Here are the details.

[View the document](<URL>)

Suitable Use Cases

I find this method particularly useful for the following purposes:

Simple explanatory documents created with AI
Work instructions
Explanations of game or community rules
Sharing development-related information
Organizing long Discord posts into a more readable format
Notes that only need to be shared temporarily
Organizing the results of a discussion with ChatGPT

Compared with posting a long message directly in Discord, this method helps keep the original post short and easy to read.

How to Use It

The website is available here:

Create a Viewing Page from Markdown

The basic steps are as follows:

Enter a document title and the Markdown text of the document.
Click “Save in URL.”
If you want to share the document for viewing, click Copy the “View the document” link for Discord.
Paste the copied text into Discord.
Discord displays it as a link labeled “View the document.”
The recipient can view the document simply by clicking the link.

Because the document text itself is stored inside the URL, you do not need to send a separate document file.

Limitations

With this method, the Markdown text itself is compressed, encoded in Base64, and included in the URL.

Therefore, considering the maximum URL length that can be handled by browsers, Discord, and other services, the compressed and Base64-encoded data embedded in the URL is currently limited to fewer than 1,920 characters.

Embedding image data as Base64 would make the URL extremely long.

For this reason, it is difficult to use image embedding practically when sharing documents through URLs.

This method is intended for:

Easily sharing text-based documents created with AI on Discord

It is not intended to replace full-scale online storage or document-sharing services.

For simple documents that mainly consist of text, however, it can be a convenient option.

Also, when the document content is changed, you generally need to create a new URL. Therefore, this method is not suitable for continuously updating the content associated with the same URL.

For Those Who Want to Check the Code or Prioritize Security

The source code is publicly available on GitHub.

👇 GitHub

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index80English3.html

If you want to check whether the code contains suspicious data transmission to external services or malicious code, you can inspect the source code and communication destinations yourself.

As an additional method, you can download the HTML file, attach it to ChatGPT or another AI service, and ask:

Please check whether this HTML contains suspicious data transmission to external services or malicious code.

However, an AI-based check alone cannot completely guarantee the safety of the code.

If you use it for an important purpose, please inspect the code and communication destinations yourself as well.

If You Want to Prioritize Security Even Further

If you want to take additional security precautions, you can:

Download the HTML file from GitHub.
Check the code and communication destinations.
Ask an AI service to perform an additional review if necessary.
Host the file on your own GitHub Pages or another environment you control.

This approach allows you to use your own copy without worrying about future changes to the code on the original website.

You Can Customize It for Your Own Use

Because the HTML source code is publicly available, you can use ChatGPT or another AI service to make changes such as:

Changing the design
Removing unnecessary buttons
Changing the input method
Adding Discord-related features
Adding document templates for personal use

Adjusting the tool to suit your own workflow is another option.

If you create and publish an even more convenient version, I would be happy to try it, so please let me know.

If you publish a modified version based on this repository, please follow the conditions of the MIT License.

You must include the copyright notice and the MIT License text.

Conclusion

With this method, documents can be shared as follows:

For the person creating and sharing the document

Create Markdown with AI → Paste it into the website → Paste the generated message into Discord

For the person viewing the document

Click “View the document”

This method is particularly suitable when you want to easily share a simple, text-based document created with AI on Discord.

👇 The website is available here:

Create a Viewing Page from Markdown

For Those Who Want to Review the Code or Prioritize Security

👇 GitHub

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index80English3.html

The GitHub source code is available for anyone who would like to inspect it themselves and check whether it contains any malicious or suspicious code.

While this does not guarantee a comprehensive security review, another option is to provide the code to ChatGPT or a similar AI tool and ask it to check for potentially malicious behavior, suspicious network requests, or other security concerns before running it locally.

You can also use ChatGPT or similar tools to customize the code to better suit your own needs before using it.

Whether you customize it or not, another option is to host it on your own GitHub Pages site or server.

If you create an improved or more convenient version and make it publicly available, I would be happy to try it as well.

If you publish a modified version based on this repository rather than a completely independent rewrite, please make sure to comply with the terms of the MIT License.

Adding a Simple News Feed to a Custom Start Page with RSS.app(Includes a sample)

uni928 — Fri, 11 Sep 2026 04:44:32 +0000

I recently added a simple news section to a custom browser start page that I am building.

Demo:

https://uni928.github.io/Uni928PublicHTMLs2/index4BEnglish.html

The page already works as a lightweight start page where shortcuts can be saved and organized into folders.

This time, I wanted to add one more feature:

A news feed that can be opened only when needed.

Why I used an RSS widget

At first, I considered retrieving news data myself and building the entire news UI manually.

However, for a small personal web tool, maintaining news sources, parsing feeds, and creating the display logic adds quite a lot of unnecessary code.

Instead, I used an RSS.app widget.

RSS.app provides embeddable widgets for RSS feeds, including list-style news feeds.

The basic implementation can be very small:

<iframe
  src="https://rss.app/embed/v1/list/YOUR_WIDGET_ID"
  title="News feed">
</iframe>

The widget handles the actual feed display, while my page only needs to provide the surrounding UI.

Load the news only when the panel is opened

I did not want the news widget to load every time the start page was opened.

So the iframe is created only when the user opens the News panel for the first time.

let newsLoaded = false;

function loadNewsOnce() {
  if (newsLoaded) return;

  newsLoaded = true;

  const frame = document.createElement('iframe');

  frame.className = 'newsFrame';
  frame.title = 'News feed';
  frame.loading = 'eager';
  frame.referrerPolicy = 'strict-origin-when-cross-origin';
  frame.src = 'https://rss.app/embed/v1/list/YOUR_WIDGET_ID';

  newsFrameWrap.appendChild(frame);
}

This keeps the start page lightweight when I only want to use the search box or shortcuts.

Remember whether the news panel was open

The page already uses IndexedDB for its saved data.

I also store the open/closed state of the news panel.

Conceptually, it works like this:

await setSetting('newsPanelOpen', true);

When the page is opened again, the previous state can be restored.

const wasOpen = await getSetting('newsPanelOpen', false);

await setNewsOpen(Boolean(wasOpen), false);

This is a very small detail, but it makes the page feel more like a persistent browser tool rather than a normal temporary web page.

The resulting layout

The final page has three main areas:

Search
Saved shortcuts and folders
An expandable news section

The news feed is placed at the bottom so it does not interfere with the main purpose of the page.

It is also displayed as a vertical list rather than a large dashboard.

For this type of start page, I found a simple list easier to scan.

A note about third-party content

The news items displayed inside the widget come from third-party sources.

The widget is therefore used as an external feed display rather than copying or republishing the full news articles inside the page.

If you build something similar, it is worth checking the terms of the RSS/widget provider and the rights associated with the feeds you choose to display.

Conclusion

Embedding an RSS widget turned out to be a convenient way to add news to a small static HTML application.

The main advantage for me was that I could keep the implementation simple:

Static HTML
    ↓
Expandable news panel
    ↓
RSS.app widget
    ↓
External news sources

There is no need to build a complete news reader just to add a small news section to a start page.

For small personal tools and prototypes, this approach can be a useful option.

Connecting Screen Transitions with Image Preservation and a Circular Mask(Includes a sample)

uni928 — Mon, 31 Aug 2026 05:25:07 +0000

A simple fade transition can sometimes make the connection between the previous screen and the next screen feel weak.

One way to create a more seamless transition is to temporarily preserve the previous screen as an image, place it over the next screen, and gradually reveal the new screen with a circular mask.

👇 Sample site

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

Basic Flow

Save the current screen as an image.
Generate and load the next screen.
Place the saved image over the entire screen.
Reveal the next screen in a circular shape centered around the character or another desired position.
Delete the saved image once the circle has expanded across the entire screen.

Important Implementation Notes

The captured image should be created according to the screen size and must always be discarded after the transition is complete.

If loading the next screen takes time, this transition can also be used when navigating to a loading screen and again when leaving the loading screen.

Summary

By preserving the previous screen as an image, displaying the next screen underneath it, and gradually revealing the new screen with a circular mask, you can create an engaging transition without passing through a black screen.

Once this type of screen transition has been made reusable, it can be applied not only to mazes and games, but also to web pages, settings screens, detail screens, modal windows, and many other interfaces.

Share Formatted AI Documents on Discord—One-Click Viewing, No File Uploads

uni928 — Mon, 31 Aug 2026 01:15:46 +0000

This article introduces a simple way to share AI-generated documents on Discord:

The recipient can open a formatted document with one click
The sender does not need to upload any files

The basic idea is simple.

The tool generates a Discord-ready link like this:

[View Document](<URL containing compressed and Base64-encoded Markdown>)

On Discord, the recipient only sees a clean link such as:

View Document

They can click the link and immediately view the document as a formatted webpage, with Markdown headings, bold text, lists, and other formatting applied.

Try the Example First

I created a sample page that explains how the tool works using the same sharing method.

👇 View the example here:

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

After reading the instructions, you can use the actual tool here:

Create a Shareable Markdown Page

How It Works

First, ask ChatGPT or another AI tool to create a document in Markdown format.

For example:

Please create a short Markdown document explaining XX for sharing on Discord.

Then paste the generated Markdown into:

Create a Shareable Markdown Page

From the "Save as URL" section, you can generate a Discord-ready link in this format:

[View Document](<URL containing compressed and Base64-encoded Markdown>)

Then simply paste that text into Discord.

Instead of seeing the full long URL, the recipient sees a clean link like this:

View Document

Discord Lets You Hide Long URLs Behind Link Text

Discord supports Markdown-style links such as:

[View Document](<URL>)

For example:

[View Document](<https://uni928.github.io/Uni928PublicHTMLs/index80Sample2English.html>)

When posted in Discord, the recipient only needs to click the displayed text.

This means even if the actual URL is very long, the message itself can stay clean and readable.

The Markdown Is Stored Inside the URL

This tool compresses the Markdown text, converts it to Base64, and stores the result directly inside the URL.

The sharing process is therefore:

Ask ChatGPT or another AI to create a Markdown document
Paste the Markdown into the tool
Generate a shareable URL
Paste the generated link into Discord

This means you do not need to separately create and upload a Markdown, HTML, or PDF file.

The document itself can be shared through the URL.

Fewer Steps for Simple Document Sharing

When using ChatGPT or other generative AI tools, it is easy to create things like:

Short guides
Instructions
Simple reports
Explanatory documents

However, sharing them on Discord can sometimes require extra steps such as:

Saving the text as a Markdown file
Converting it to HTML or PDF
Uploading the file to Discord
Moving the content into Google Docs or another service

With this method, you can instead share something as simple as:

More details here:

[View Document](<URL>)

This keeps the Discord message short while letting the recipient view the full formatted document separately.

Good Use Cases

I find this method particularly useful for:

Short AI-generated guides
Work instructions
Rules for games or communities
Development notes
Long Discord messages that are easier to read as a separate page
Temporary notes
Summaries of ChatGPT discussions

It is especially useful when the document is mostly text.

How to Use the Tool

The actual tool is available here:

Create a Shareable Markdown Page

The basic steps are:

Enter a document title
Paste your Markdown content
Click Save as URL
Click the option to copy the Discord "View Document" link
Paste the copied text into Discord
The recipient clicks View Document to open the formatted page

The document data is stored inside the URL itself, so you do not need to send a separate file.

Limitations

This method stores the Markdown content directly inside the URL.

Because browsers, Discord, and other services have practical URL-length limits, the current version limits the compressed and Base64-encoded data to under 1,920 characters.

Images are also not well suited to this method.

Embedding image data directly in the URL can make the URL extremely large, so this method is primarily intended for text-based documents rather than image-heavy content.

In other words, this is not intended to replace full document hosting or cloud storage services.

It is designed for a simpler use case:

Quickly sharing AI-generated, text-focused documents on Discord

For short and medium-sized text documents, it can be a convenient approach.

Also, because the content is embedded in the URL, editing the document usually means generating a new URL.

So this method is not ideal when you need to keep updating the same shared URL over time.

For Users Who Want to Review the Code

The source code is available on GitHub:

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index80English.html

The sample page in this article uses index80Sample2English.html, while the actual English version of the tool is index80English.html.

The source is published so users who care about security can review the code and network behavior themselves.

As an additional check, you can download the HTML and ask ChatGPT or another AI tool something like:

Please review this HTML file and check whether it contains any suspicious external data transmission or malicious code.

However, AI review should only be treated as an additional check.

For important use cases, you should also review the code and network destinations yourself.

If You Want More Control

If you want to reduce reliance on the original hosted version, you can also:

Download the HTML from GitHub
Review the code yourself
Optionally ask an AI tool to review it as well
Host it on your own GitHub Pages site or another static hosting service

This way, you do not need to worry about the original hosted version changing later.

You Can Also Customize It for Your Own Use

Because the HTML is public, you can modify it with ChatGPT or another coding assistant.

For example, you could:

Change the design
Remove unnecessary buttons
Change the input workflow
Add Discord-specific features
Add your own document templates

Customizing the tool for your own workflow may make it even more useful.

If you create and publish an improved version, I would be happy to hear about it and try it.

If you publish a modified version based on this repository, please follow the MIT License terms.

You must include the required copyright notice and MIT License text.

Summary

With this method, the sender's workflow is:

Create Markdown with AI → Paste it into the tool → Paste the generated link into Discord

The recipient's workflow is even simpler:

Click "View Document"

This approach works particularly well when you want to share simple, AI-generated, text-based documents on Discord without uploading files.

👇 View the sample instructions:

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

A Small Solution to the Problem of HTML Files Created with ChatGPT Growing Larger with Every Revision(Free to use)

uni928 — Wed, 26 Aug 2026 05:23:25 +0000

When you ask ChatGPT to create an HTML site, the code can gradually grow larger as you continue making revisions.

Existing HTML minification tools are excellent for reducing file size. However, relatively few are designed with ChatGPT-based analysis and re-editing in mind, which makes them less suitable for this kind of workflow.

That is why I created a tool that can minify HTML while keeping it as easy as possible for ChatGPT to analyze.

In this article, I will refer to “minification” as “cleanup” for convenience.

Cleanup is intended to slightly reduce file size and token usage when repeatedly making revisions.

Compression is intended to reduce file size when sharing HTML in a chat, assuming the recipient only needs to open the file and does not need to edit it.

※Because the cleanup process is performed mechanically, there is no guarantee that it will never introduce bugs. Always check that the HTML works correctly after cleanup.

👇 Try the site here

https://uni928.github.io/Uni928PublicHTMLs2/index2English.html

Features

This tool has three modes.

Safe

Compresses the file without modifying the contents of the HTML, CSS, or JavaScript.

Experimental

Cleans up consecutive whitespace, comments, and similar elements before compressing the file. This mode is suitable when sharing HTML in a chat and you believe the recipient is unlikely to read the source code directly.

Clean Only

Only cleans up consecutive whitespace, comments, and similar elements, then saves the result as a regular HTML file without self-extracting compression. This mode is recommended when publishing the file on a web server.

There are many third-party tools that can achieve more aggressive cleanup. However, this tool prioritizes keeping the HTML as easy as possible for ChatGPT to analyze while minimizing its impact on reasoning.

It Can Also Be Used in Conversations with ChatGPT

When you repeatedly ask ChatGPT to revise an HTML file, its size tends to grow because of comments, whitespace, and newly added code.

With this tool, the parts that are cleaned up can often achieve a perceptible file-size reduction of around 15%, depending on the HTML.

Code generated by ChatGPT is often relatively readable and well structured to begin with.

If you only reduce unnecessary whitespace and comments, most of the actual code remains unchanged. Therefore, I believe the impact on reasoning is also relatively small.

For these reasons, when passing the HTML to ChatGPT again, this tool is expected to provide the following benefit:

Slightly reduce input/output token usage while keeping the impact on reasoning relatively small.

The reduction in output applies when asking ChatGPT to generate the entire revised HTML file.

This does not necessarily apply when asking it to generate only part of the file.

I have added the following prompt to my ChatGPT custom instructions:

- Don't reformat minified HTML.

Choose a Mode Based on Your Use Case

If you are only sharing an HTML file in a chat and the recipient probably does not need to read its contents directly, you can use Experimental mode to reduce the file size further.

On the other hand, when distributing a file through a web server, compression such as gzip or Brotli is often performed automatically. For that reason, self-extracting compression is generally not recommended.

In such cases, I recommend using Clean Only to reduce the size of the HTML itself before publishing it.

You only need to drag and drop the file, so if you frequently create and revise HTML with ChatGPT, please give it a try.

👇 Try the site here

https://uni928.github.io/Uni928PublicHTMLs2/index2English.html

For Those Who Want to See the Code

👇 GitHub

https://github.com/uni928/Uni928PublicHTMLs2/blob/main/index2English.html

The GitHub URL is provided for anyone who wants to visually inspect the source code and check for potentially malicious code.

Although it is not possible to perform a completely exhaustive review, another useful approach is to download the file, attach the code to ChatGPT, ask it to check for potentially malicious code, and then use it locally.

I also recommend using ChatGPT or similar tools to tune the site so that it works better for your own needs.

If you create a more convenient site, I would be happy to use it as well, so I would appreciate it if you made it publicly available.

If you publish a modified version of this repository rather than rebuilding it completely from scratch, please follow the terms of the MIT License when distributing it. This includes retaining the copyright notice and the MIT License text.

Make Basic HTML Analysis More Difficult

uni928 — Fri, 21 Aug 2026 01:14:10 +0000

This plugin makes saving the page with “Save As” and analyzing it through Developer Tools more difficult.

The page is displayed using a Blob URL, so “View Source” is also unavailable. This reduces the number of simple ways to inspect the source. However, some APIs may not work because the page uses a Blob URL.

Add the following script:

<script src="https://uni928.github.io/Uni928PublicHTMLs/Plugin/plugin8.js"></script>

Sample:

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

This is not a complete security measure, but it can make casual analysis more difficult.

👇Github

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index88_sample2.html

https://github.com/uni928/Uni928PublicHTMLs/blob/main/Plugin/plugin8.js

Back Up Your ChatGPT Conversations as Easy-to-Read HTML

uni928 — Wed, 19 Aug 2026 05:54:52 +0000

I created a tool that lets you load a saved ChatGPT HTML file and convert the conversation into a cleaner, easier-to-read HTML page.

Note: This tool does not create an HTML file that can be imported back into ChatGPT. It only generates an HTML file for easier viewing.

Note: The tool is designed for the current HTML format saved by ChatGPT. It may stop working if ChatGPT changes the structure of its saved HTML pages.

Try the Tool

You can use it directly in your browser:

https://uni928.github.io/Uni928PublicHTMLs2/index6English.html

No installation is required.

How to Use It

Open the conversation you want to save in the browser version of ChatGPT.
Right-click the page and select “Save As…”
Drag and drop the saved HTML file into the tool.
Click “Download HTML”

That’s it.

The tool will generate a new HTML file with the conversation organized into a much more readable format.

Main Features

Organizes messages from you and ChatGPT into a conversation-style layout
Can generate the page with ChatGPT responses collapsed by default
ChatGPT responses can be expanded and collapsed by clicking them
Reformats tables to make them easier to read
Displays code blocks, headings, lists, and other content in a cleaner format
The generated page is also a single HTML file, making it easy to save or share

This is especially useful for long conversations.

By keeping ChatGPT responses collapsed by default, you can quickly look through your previous questions and find the part of the conversation you want to review.

Final Notes

I made this tool for situations where you want to look back at a previous ChatGPT conversation later, almost like reading reference material or notes.

Feel free to give it a try:

https://uni928.github.io/Uni928PublicHTMLs2/index6English.html

Turn Markdown into a Readable, Re-Editable HTML File(Free to use)

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/index80English4.html

The version that saves the site content to IndexedDB to reduce data usage from the second visit onward is available at the URL below.

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

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

You can choose from multiple fonts. Disable Japanese fonts if necessary.

Sample

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/index80English4.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/index80English4.html

For Those Who Want to Review the Code or Prioritize Security

👇 GitHub

https://github.com/uni928/Uni928PublicHTMLs/blob/main/index80English4.html

The GitHub source code is available for anyone who would like to inspect it themselves and check whether it contains any malicious or suspicious code.

While this does not guarantee a comprehensive security review, another option is to provide the code to ChatGPT or a similar AI tool and ask it to check for potentially malicious behavior, suspicious network requests, or other security concerns before running it locally.

You can also use ChatGPT or similar tools to customize the code to better suit your own needs before using it.

Whether you customize it or not, another option is to host it on your own GitHub Pages site or server.

If you create an improved or more convenient version and make it publicly available, I would be happy to try it as well.

If you publish a modified version based on this repository rather than a completely independent rewrite, please make sure to comply with the terms of the MIT License.

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