diff --git "a/util/stylesheets.py" "b/util/stylesheets.py"
new file mode 100755--- /dev/null
+++ "b/util/stylesheets.py"
@@ -0,0 +1,260 @@
+banner_image = """
+
+"""
+
+css = """
+.sun {
+ background-color: red;
+ opacity: 0.1;
+ position: fixed;
+ top: -1050px;
+ left: -300px;
+ width: 2200px;
+ height: 1200px;
+ border-radius: 50%;
+ animation-name: sunrise2;
+ animation-duration: 20s;
+ animation-timing-function: ease-in-out;
+ animation-delay: 1s;
+ animation-iteration-count: infinite;
+}
+
+.sun2 {
+ background-color: orange;
+ opacity: 0.1;
+ position: fixed;
+ top: -1050px;
+ left: -1200px;
+ width: 2200px;
+ height: 1200px;
+ border-radius: 50%;
+ animation-name: sunrise2;
+ animation-duration: 14s;
+ animation-timing-function: ease-in-out;
+ animation-delay: 2s;
+ animation-iteration-count: infinite;
+}
+
+.sun3 {
+ background-color: yellow;
+ opacity: 0.1;
+ position: fixed;
+ top: -1050px;
+ left: -600px;
+ width: 2200px;
+ height: 1200px;
+ border-radius: 50%;
+ animation-name: sunrise2;
+ animation-duration: 16s;
+ animation-timing-function: ease-in-out;
+ animation-delay: 0s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes sunrise2 {
+ 0% {
+ transform: translate(0px, 0px);
+ }
+ 25% {
+ transform: translate(150px, 50px);
+ }
+ 50% {
+ transform: translate(300px, 10px);
+ }
+ 75% {
+ transform: translate(150px, 50px);
+ }
+ 100% {
+ transform: translate(0px, 0px);
+ }
+}
+
+.liquidGlass-wrapper {
+ position: relative;
+ display: flex;
+ font-weight: 600;
+ overflow: hidden;
+ color: black;
+ cursor: pointer;
+ box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.liquidGlass-effect {
+ position: absolute;
+ z-index: 0;
+ inset: 0;
+ backdrop-filter: blur(3px);
+ filter: url(#glass-distortion);
+ overflow: hidden;
+ isolation: isolate;
+ pointer-events: none
+}
+
+.liquidGlass-tint {
+ z-index: 1;
+ position: absolute;
+ inset: 0;
+ background: rgba(255, 255, 255, 0.25);
+ pointer-events: none
+}
+
+.liquidGlass-shine {
+ position: absolute;
+ inset: 0;
+ z-index: 2;
+ overflow: hidden;
+ box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
+ inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
+ pointer-events: none
+}
+
+.liquidGlass-text {
+ z-index: 3;
+ font-size: 2rem;
+ color: black;
+}
+
+body {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: sans-serif;
+ font-weight: 300;
+}
+
+body gradio-app {
+ background-color: transparent !important;
+}
+
+.gradio-container {
+ background-color: transparent !important;
+}
+
+a {
+ text-decoration: none;
+}
+
+.title {
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+}
+
+.title img {
+ max-height: 100px
+}
+
+.subtitle {
+ text-align: center;
+}
+
+.contain {
+ background: rgba(255, 255, 255, 0.3) !important;
+ border-radius: 1.5rem;
+ padding: 1rem;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+ transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.contain div {
+ background: transparent !important;
+}
+
+.contain .block {
+ background: transparent !important;
+ border-radius: 0.5rem !important;
+}
+
+.contain .overflow-dropdown {
+ background: #ffffff !important;
+}
+
+.gr-group {
+ border: 0 !important;
+}
+
+.button {
+ padding: 1.5rem 2.5rem;
+ border-radius: 3rem;
+}
+
+.button,
+.button > div {
+ border-radius: 3rem;
+}
+
+.button:hover {
+ padding: 1.8rem 2.8rem;
+}
+
+.button:hover > div {
+ border-radius: 4rem;
+}
+
+.button svg {
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
+}
+
+.button:hover svg {
+ transform: scale(0.95);
+}
+"""
+
+pre_html = """
+
+
+
+"""
+
+pre_js = """
+function injectLiquidGlass() {
+ let body = document.querySelector('body')
+ let bg1 = document.createElement('div')
+ bg1.classList.add('sun')
+ body.prepend(bg1)
+ let bg2 = document.createElement('div')
+ bg2.classList.add('sun2')
+ body.prepend(bg2)
+ let bg3 = document.createElement('div')
+ bg3.classList.add('sun3')
+ body.prepend(bg3)
+ let contain = document.querySelector('.contain')
+ contain.classList.add('liquidGlass-wrapper')
+ let liquidGlassWrapper = contain
+ let div_effect = document.createElement('div')
+ div_effect.classList.add('liquidGlass-effect')
+ liquidGlassWrapper.prepend(div_effect)
+ let div_tint = document.createElement('div')
+ div_tint.classList.add('liquidGlass-tint')
+ liquidGlassWrapper.prepend(div_tint)
+ let div_shine = document.createElement('div')
+ div_shine.classList.add('liquidGlass-shine')
+ liquidGlassWrapper.prepend(div_shine)
+ let svgFilter = document.createElement('svg')
+ svgFilter.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ svgFilter.style.display = 'none'
+ document.body.appendChild(svgFilter)
+ document.querySelector('footer').innerText = "ToonComposer. Sample images used with permission. For research purposes only."
+}
+"""
\ No newline at end of file
