Spaces:
Paused
Paused
Update app.py
Browse files
app.py
CHANGED
|
@@ -1,10 +1,7 @@
|
|
| 1 |
import gradio as gr
|
| 2 |
-
import numpy as np
|
| 3 |
-
from PIL import Image
|
| 4 |
-
import io
|
| 5 |
import base64
|
| 6 |
|
| 7 |
-
#
|
| 8 |
html_content = """
|
| 9 |
<!DOCTYPE html>
|
| 10 |
<html lang="ru">
|
|
@@ -33,6 +30,7 @@ html_content = """
|
|
| 33 |
margin: 0;
|
| 34 |
padding: 20px;
|
| 35 |
user-select: none;
|
|
|
|
| 36 |
}
|
| 37 |
|
| 38 |
h1 { margin-bottom: 10px; font-weight: 900; }
|
|
@@ -54,6 +52,8 @@ html_content = """
|
|
| 54 |
border-radius: 20px;
|
| 55 |
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
| 56 |
background-color: #E13839;
|
|
|
|
|
|
|
| 57 |
}
|
| 58 |
|
| 59 |
.controls {
|
|
@@ -539,7 +539,7 @@ html_content = """
|
|
| 539 |
const w = 300;
|
| 540 |
const h = 300 * (baseLayer.object.height / baseLayer.object.width);
|
| 541 |
tempCtx.drawImage(baseLayer.object, -w/2, -h/2, w, h);
|
| 542 |
-
|
| 543 |
tempCtx.font = "900 300px 'Nunito'";
|
| 544 |
tempCtx.textAlign = "center";
|
| 545 |
tempCtx.textBaseline = "middle";
|
|
@@ -760,8 +760,14 @@ html_content = """
|
|
| 760 |
"""
|
| 761 |
|
| 762 |
def create_app():
|
| 763 |
-
|
| 764 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 765 |
return demo
|
| 766 |
|
| 767 |
if __name__ == "__main__":
|
|
|
|
| 1 |
import gradio as gr
|
|
|
|
|
|
|
|
|
|
| 2 |
import base64
|
| 3 |
|
| 4 |
+
# Исправленный HTML код (убрана опечатка 'iile}' и настроены стили для работы в iframe)
|
| 5 |
html_content = """
|
| 6 |
<!DOCTYPE html>
|
| 7 |
<html lang="ru">
|
|
|
|
| 30 |
margin: 0;
|
| 31 |
padding: 20px;
|
| 32 |
user-select: none;
|
| 33 |
+
overflow-y: auto; /* Разрешаем скролл, если экран маленький */
|
| 34 |
}
|
| 35 |
|
| 36 |
h1 { margin-bottom: 10px; font-weight: 900; }
|
|
|
|
| 52 |
border-radius: 20px;
|
| 53 |
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
| 54 |
background-color: #E13839;
|
| 55 |
+
max-width: 100%; /* Адаптивность для мобилок */
|
| 56 |
+
height: auto;
|
| 57 |
}
|
| 58 |
|
| 59 |
.controls {
|
|
|
|
| 539 |
const w = 300;
|
| 540 |
const h = 300 * (baseLayer.object.height / baseLayer.object.width);
|
| 541 |
tempCtx.drawImage(baseLayer.object, -w/2, -h/2, w, h);
|
| 542 |
+
} else if (baseLayer.type === 'text') { // <--- ИСПРАВЛЕНА ОШИБКА ЗДЕСЬ
|
| 543 |
tempCtx.font = "900 300px 'Nunito'";
|
| 544 |
tempCtx.textAlign = "center";
|
| 545 |
tempCtx.textBaseline = "middle";
|
|
|
|
| 760 |
"""
|
| 761 |
|
| 762 |
def create_app():
|
| 763 |
+
# Используем кодирование в base64, чтобы поместить весь сайт в iframe.
|
| 764 |
+
# Это изолирует CSS и JS от Gradio, и все заработает.
|
| 765 |
+
encoded_html = base64.b64encode(html_content.encode('utf-8')).decode('utf-8')
|
| 766 |
+
iframe_html = f'<iframe src="data:text/html;base64,{encoded_html}" style="width:100%; height:100vh; border:none; display:block;"></iframe>'
|
| 767 |
+
|
| 768 |
+
with gr.Blocks(title="Swaga Icon Maker", css="footer {visibility: hidden} .gradio-container {padding: 0; margin: 0;}") as demo:
|
| 769 |
+
gr.HTML(iframe_html)
|
| 770 |
+
|
| 771 |
return demo
|
| 772 |
|
| 773 |
if __name__ == "__main__":
|