Update app.py

app.py

@@ -14,7 +14,151 @@ background_html = """
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 """
+ 
+title_html="""
+    <center>
+        <div id="title-container">
+            <h1 id="title-text">FLUX Capacitor</h1>
+        </div>
+    </center>
+"""
 
+css = """
+.gradio-container {
+    background: url(https://huggingface.co/spaces/K00B404/FLUX.1-Dev-Serverless-darn-enhanced-prompt/resolve/main/edge.png);
+    background-size: 900px 880px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    color:#000;
+}
+.dark\:bg-gray-950:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(157, 17, 142);
+}
+.gradio-container-4-41-0 .prose :last-child {
+  margin-top: 8px !important;
+}
+.gradio-container-4-41-0 .prose :last-child {
+  margin-bottom: -7px !important;
+}
+.dark {
+    --button-primary-background-fill: #09e60d70;
+    --button-primary-background-fill-hover: #00000070;
+    --background-fill-primary: #000;
+    --background-fill-secondary: #000;
+}
+.hide-container {
+    margin-top;-2px;
+}
+#app-container3 {
+    background-color: rgba(255, 255, 255, 0.001);  /* Corrected to make semi-transparent */
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    border-radius: 125px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Adjusted shadow opacity */
+}
+#app-container {
+    background-color: rgba(255, 255, 255, 0.001);  /* Semi-transparent background */
+    max-width: 600px;
+    margin: 0 auto;  /* Center horizontally */
+    padding-bottom: 10px;
+    border-radius: 25px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjusted shadow opacity */
+}
+.panel-container {
+    background-image: url('your-neon-border-image.png');
+    background-size: 100% 100%; /* Adjust the size to cover the container */
+    background-repeat: no-repeat;
+    background-position: center;
+}
+#title-container {
+    display: flex;
+    align-items: center
+    margin-bottom:10px;
+    justify-content: center;
+}
+#title-icon {
+    width: 32px;
+    height: auto;
+    margin-right: 10px;
+}
+#title-text {
+    font-size: 30px;
+    font-weight: bold;
+    color: #000;
+}
+:root {
+  --panel-size: 300px;
+  --border-width: 4px;
+  --glow-blur: 15px;
+}
+body {
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+.neon-panel {
+  width: var(--panel-size);
+  height: var(--panel-size);
+  background-color: #000;
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+}
+.neon-panel::before,
+.neon-panel::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  background: linear-gradient(
+    124deg,
+    #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840,
+    #1ddde8, #2b1de8, #dd00f3, #dd00f3
+  );
+  background-size: 300% 300%;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  z-index: -1;
+  animation: moveGradient 10s ease infinite;
+}
+.neon-panel::after {
+  filter: blur(var(--glow-blur));
+}
+.neon-panel-content {
+  position: absolute;
+  top: var(--border-width);
+  left: var(--border-width);
+  right: var(--border-width);
+  bottom: var(--border-width);
+  background-color: #000;
+  border-radius: 16px;
+  z-index: 1;
+}
+@keyframes moveGradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@media (max-width: 768px) {
+  :root {
+    --panel-size: 250px;
+    --glow-blur: 10px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .neon-panel::before,
+  .neon-panel::after {
+    animation: none;
+  }
+}
+"""
 def respond(
     message,
     history: list[tuple[str, str]],
@@ -48,7 +192,7 @@ def respond(
         yield response
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     #gr.HTML(background_html)  # Insert the background effect
     gr.ChatInterface(
         respond,