Hugging Face's logo

Spaces:
WatchOutForMike
/
DnDFluxMidjourney
Running

App Files Community
WatchOutForMike commited on
Commit
4b35341
·
1 Parent(s): f558201

CSS Update

Browse files
Files changed (2) hide show
  1. app.py +31 -38
  2. dnd_theme.css +74 -0
app.py CHANGED
@@ -1,43 +1,36 @@
1
  import gradio as gr
2
 
3
- # Custom CSS styling
4
- custom_css = """
5
- body {
6
- margin: 0;
7
- padding: 0;
8
- background-color: #1e1e1e; /* Dark gray background */
9
- color: #ffffff; /* White text for contrast */
10
- font-family: Arial, sans-serif;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- height: 100vh;
15
- }
16
 
17
- .gradio-container {
18
- border: 1px solid #444; /* Subtle dark border */
19
- background-color: #2b2b2b; /* Slightly lighter dark theme for container */
20
- border-radius: 8px; /* Rounded edges */
21
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
22
- padding: 10px;
23
- }
24
-
25
- button {
26
- background-color: #444; /* Dark button with light hover effect */
27
- color: #ffffff;
28
- border: 1px solid #666;
29
- padding: 10px 20px;
30
- border-radius: 4px;
31
- cursor: pointer;
32
- }
33
-
34
- button:hover {
35
- background-color: #666; /* Slightly lighter on hover */
36
- }
37
  """
38
 
39
- # Load your Gradio model
40
- demo = gr.load("models/strangerzonehf/Flux-Midjourney-Mix2-LoRA")
41
-
42
- # Launch with CSS customization
43
- demo.launch(css=custom_css)
 
 
 
 
 
1
  import gradio as gr
2
 
3
+ # Load the model
4
+ model = gr.load("models/strangerzonehf/Flux-Midjourney-Mix2-LoRA")
 
 
 
 
 
 
 
 
 
 
 
5
 
6
+ # Define the custom HTML and CSS
7
+ custom_html = """
8
+ <!DOCTYPE html>
9
+ <html lang="en">
10
+ <head>
11
+ <meta charset="UTF-8">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
+ <title>D&D Themed Gradio Space</title>
14
+ <link rel="stylesheet" href="dnd_theme.css">
15
+ </head>
16
+ <body>
17
+ <div class="gradio-container">
18
+ <h1>D&D Themed Gradio Space</h1>
19
+ <div id="gradio-app"></div>
20
+ <div class="footer">
21
+ <p>Powered by Hugging Face and Gradio</p>
22
+ </div>
23
+ </div>
24
+ </body>
25
+ </html>
26
  """
27
 
28
+ # Launch the Gradio interface with custom HTML and CSS
29
+ gr.Interface(
30
+ fn=model,
31
+ inputs=gr.inputs.Textbox(lines=2, placeholder="Enter your prompt here..."),
32
+ outputs=gr.outputs.Image(type="pil"),
33
+ title="D&D Themed Gradio Space",
34
+ description="Generate images using the Flux-Midjourney-Mix2-LoRA model.",
35
+ css=custom_html
36
+ ).launch()
dnd_theme.css ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* dnd_theme.css */
2
+ body {
3
+ background-color: #231f20;
4
+ color: #f5f5f5;
5
+ font-family: 'Arial', sans-serif;
6
+ }
7
+
8
+ .gradio-container {
9
+ max-width: 800px;
10
+ margin: 0 auto;
11
+ padding: 20px;
12
+ background-color: #3c2f2f;
13
+ border: 2px solid #8b4513;
14
+ border-radius: 10px;
15
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
16
+ }
17
+
18
+ h1, h2, h3, h4, h5, h6 {
19
+ color: #ffd700;
20
+ text-align: center;
21
+ }
22
+
23
+ button {
24
+ background-color: #8b4513;
25
+ color: #f5f5f5;
26
+ border: none;
27
+ padding: 10px 20px;
28
+ border-radius: 5px;
29
+ cursor: pointer;
30
+ transition: background-color 0.3s;
31
+ }
32
+
33
+ button:hover {
34
+ background-color: #a0522d;
35
+ }
36
+
37
+ input[type="text"], input[type="file"], textarea {
38
+ background-color: #3c2f2f;
39
+ color: #f5f5f5;
40
+ border: 1px solid #8b4513;
41
+ border-radius: 5px;
42
+ padding: 10px;
43
+ width: 100%;
44
+ box-sizing: border-box;
45
+ margin-bottom: 10px;
46
+ }
47
+
48
+ input[type="text"]:focus, input[type="file"]:focus, textarea:focus {
49
+ border-color: #ffd700;
50
+ }
51
+
52
+ label {
53
+ color: #ffd700;
54
+ }
55
+
56
+ .gradio-output {
57
+ background-color: #3c2f2f;
58
+ border: 1px solid #8b4513;
59
+ border-radius: 5px;
60
+ padding: 20px;
61
+ margin-top: 20px;
62
+ text-align: center;
63
+ }
64
+
65
+ .gradio-output img {
66
+ max-width: 100%;
67
+ border-radius: 10px;
68
+ }
69
+
70
+ .footer {
71
+ text-align: center;
72
+ margin-top: 20px;
73
+ color: #ffd700;
74
+ }