From b9be6e512abd4a73b70701256cad659b3d513cd9 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Fri, 4 Jul 2025 15:11:17 -0400 Subject: [PATCH] fix: streamline quick start section and ensure consistent code-first demo structure MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Streamlined index.html quick start section to focus on one-line installation - Fixed demo.html section ordering to consistently show code examples before live demos - Corrected section 12 numbering (was duplicate section 11) - Enhanced demo page user experience with proper code-then-demo flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- demo.html | 268 ++++++++++++++++++++++++++--------------------------- index.html | 69 +++----------- 2 files changed, 145 insertions(+), 192 deletions(-) diff --git a/demo.html b/demo.html index 4c64c2d..bc7ead9 100644 --- a/demo.html +++ b/demo.html @@ -229,13 +229,6 @@

6. 🔧 Feature Buttons Only

Add specific feature buttons without the full chat interface:

-

🎯 Live Example

-

Try the feature buttons below:

-
-
-

Available features: Text-to-Speech and Read Page buttons

-
-

📄 Code Example

How to add specific feature buttons @@ -254,6 +247,13 @@

Available features: chat, tts, translate, read, full

+ +

🎯 Live Example

+

Try the feature buttons below:

+
+
+

Available features: Text-to-Speech and Read Page buttons

+
@@ -261,6 +261,20 @@

7. 🔊 Text-to-Speech Options

Two ways to add TTS functionality to your website:

+

📄 Code Examples

+
+ How to implement both TTS options + +
Option 1: TTS Widget Button
+ 
<div class="uncloseai" data-features="tts"></div>
+ +
Option 2: TTS Modal Button
+ 
<button onclick="openTTSModal()">🔊 Text to Speech</button>
+ +

Note: Both require the uncloseai.js script to be loaded first:

+ 
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+
+

🎯 Live Examples

@@ -280,20 +294,6 @@

Best for: General-purpose text-to-speech tool

- -

📄 Code Examples

-
- How to implement both TTS options - -
Option 1: TTS Widget Button
- 
<div class="uncloseai" data-features="tts"></div>
- -
Option 2: TTS Modal Button
- 
<button onclick="openTTSModal()">🔊 Text to Speech</button>
- -

Note: Both require the uncloseai.js script to be loaded first:

- 
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
-
@@ -301,26 +301,6 @@

8. 🌐 Translation Options

Two ways to add translation functionality to your website:

-

🎯 Live Examples

- -
- -
-
🌐 Translation Widget Button
-

Embedded translation button for content:

-
-

Best for: Adding translation to specific content areas

-
- - -
-
🔄 Translation Modal
-

Standalone modal for translation tasks:

- -

Best for: General-purpose translation tool

-
-
-

📄 Code Examples

How to implement both translation options @@ -342,6 +322,26 @@

Note: Both require the uncloseai.js script to be loaded first:

<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+ +

🎯 Live Examples

+ +
+ +
+
🌐 Translation Widget Button
+

Embedded translation button for content:

+
+

Best for: Adding translation to specific content areas

+
+ + +
+
🔄 Translation Modal
+

Standalone modal for translation tasks:

+ +

Best for: General-purpose translation tool

+
+
@@ -472,89 +472,11 @@ await readPageWithHermes();

The custom API examples below demonstrate direct API usage:

- +
-

11. 🎨 Custom API Examples

+

12. 🎨 Custom API Examples

Build your own interface using uncloseai.js functions:

-

🎯 Live Examples

-

Try these custom implementations built with the Direct API:

- -
- -
-
💬 Custom AI Chat
-

Your own chat interface:

-
- - -
- - -
-
🔊 Custom Text-to-Speech
-

Your own TTS interface:

- - - -
-
- - -
-
📁 Custom File Analysis (Under Development)
-

File upload interface (temporarily disabled):

- - - -
- - -
-
📖 Custom Page Analysis
-

Analyze page content with custom prompts:

- - - -
- - -
-
🌐 Custom Translation
-

Translate text with code preservation:

- - - - -
-
-

📄 Code Examples

How to build custom interfaces with Direct API @@ -708,6 +630,84 @@ async function customTranslateExample() {

Note: All functions require uncloseai.js to be loaded first:

<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+ +

🎯 Live Examples

+

Try these custom implementations built with the Direct API:

+ +
+ +
+
💬 Custom AI Chat
+

Your own chat interface:

+
+ + +
+ + +
+
🔊 Custom Text-to-Speech
+

Your own TTS interface:

+ + + +
+
+ + +
+
📁 Custom File Analysis (Under Development)
+

File upload interface (temporarily disabled):

+ + + +
+ + +
+
📖 Custom Page Analysis
+

Analyze page content with custom prompts:

+ + + +
+ + +
+
🌐 Custom Translation
+

Translate text with code preservation:

+ + + + +
+