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
}
.title-link:link {
color: #333333
}
.title-link:active {
color: #000000
}
.title-link:visited {
color: #666666
}
.title-link:hover {
color: #FF8A00
}
.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').innerHTML = 'Demo Provided by ToonComposer Team.
Sample images are used for academic purposes only.
⚠️ Unauthorized Site Notice
We wish to inform our community that the website https://tooncomposer.com is NOT hosted, authorized, or endorsed by the ToonComposer team. This site has replicated content from our open-source project without our permission or notification, and we are unaware of the operators’ identity or intentions.
Access ToonComposer via our verified channels:
HuggingFace Demo: https://huggingface.co/spaces/TencentARC/ToonComposer
Github Repo.: https://github.com/TencentARC/ToonComposer
Official Page: https://lg-li.github.io/project/tooncomposer
'
}
""" 