File size: 6,110 Bytes
b34efa5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 |
"""
Embedding functionality for Norwegian RAG chatbot.
Provides utilities for embedding the chatbot in external websites.
"""
import os
from typing import Dict, Optional
class EmbedGenerator:
"""
Generates embedding code for integrating the chatbot into external websites.
"""
def __init__(
self,
space_name: Optional[str] = None,
username: Optional[str] = None,
height: int = 500,
width: str = "100%"
):
"""
Initialize the embed generator.
Args:
space_name: Hugging Face Space name
username: Hugging Face username
height: Default iframe height in pixels
width: Default iframe width (can be pixels or percentage)
"""
self.space_name = space_name or "norwegian-rag-chatbot"
self.username = username or "username"
self.height = height
self.width = width
def get_iframe_code(
self,
height: Optional[int] = None,
width: Optional[str] = None
) -> str:
"""
Generate iframe embed code.
Args:
height: Optional custom height
width: Optional custom width
Returns:
HTML iframe code
"""
h = height or self.height
w = width or self.width
return f'<iframe src="https://huggingface.co/spaces/{self.username}/{self.space_name}" width="{w}" height="{h}px" frameborder="0"></iframe>'
def get_javascript_widget_code(self) -> str:
"""
Generate JavaScript widget embed code.
Returns:
HTML script tag for widget
"""
return f'<script src="https://huggingface.co/spaces/{self.username}/{self.space_name}/widget.js"></script>'
def get_direct_url(self) -> str:
"""
Get direct URL to the Hugging Face Space.
Returns:
URL to the Hugging Face Space
"""
return f"https://huggingface.co/spaces/{self.username}/{self.space_name}"
def get_embed_options(self) -> Dict[str, str]:
"""
Get all embedding options.
Returns:
Dictionary of embedding options
"""
return {
"iframe": self.get_iframe_code(),
"javascript": self.get_javascript_widget_code(),
"url": self.get_direct_url()
}
def update_space_info(self, username: str, space_name: str) -> None:
"""
Update Hugging Face Space information.
Args:
username: Hugging Face username
space_name: Hugging Face Space name
"""
self.username = username
self.space_name = space_name
def create_embed_html_file(
embed_generator: EmbedGenerator,
output_path: str = "/home/ubuntu/chatbot_project/embed_example.html"
) -> str:
"""
Create an HTML file with embedding examples.
Args:
embed_generator: EmbedGenerator instance
output_path: Path to save the HTML file
Returns:
Path to the created HTML file
"""
html_content = f"""<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Norwegian RAG Chatbot - Embedding Examples</title>
<style>
body {{
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}}
h1, h2, h3 {{
color: #2c3e50;
}}
.code-block {{
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin: 15px 0;
overflow-x: auto;
}}
.example {{
margin: 30px 0;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
}}
</style>
</head>
<body>
<h1>Norwegian RAG Chatbot - Embedding Examples</h1>
<p>
This page demonstrates how to embed the Norwegian RAG Chatbot into your website.
There are multiple ways to integrate the chatbot, depending on your needs.
</p>
<h2>Option 1: iFrame Embedding</h2>
<p>
The simplest way to embed the chatbot is using an iFrame. Copy and paste the following code into your HTML:
</p>
<div class="code-block">
<pre>{embed_generator.get_iframe_code()}</pre>
</div>
<div class="example">
<h3>Example:</h3>
{embed_generator.get_iframe_code()}
</div>
<h2>Option 2: JavaScript Widget</h2>
<p>
For a more integrated experience, you can use the JavaScript widget. Copy and paste the following code into your HTML:
</p>
<div class="code-block">
<pre>{embed_generator.get_javascript_widget_code()}</pre>
</div>
<div class="example">
<h3>Example:</h3>
<p>The widget will appear below once the page is hosted on a web server:</p>
<!-- Widget will be inserted here when the script runs -->
</div>
<h2>Option 3: Direct Link</h2>
<p>
You can also provide a direct link to the chatbot:
</p>
<div class="code-block">
<pre>{embed_generator.get_direct_url()}</pre>
</div>
<h2>Customization</h2>
<p>
You can customize the appearance of the embedded chatbot by modifying the iFrame dimensions:
</p>
<div class="code-block">
<pre>{embed_generator.get_iframe_code(height=600, width="80%")}</pre>
</div>
<footer>
<p>
<small>
Created with <a href="https://huggingface.co/" target="_blank">Hugging Face</a> and
<a href="https://gradio.app/" target="_blank">Gradio</a>.
</small>
</p>
</footer>
</body>
</html>
"""
with open(output_path, 'w', encoding='utf-8') as f:
f.write(html_content)
return output_path
|