When custom HTML is added, the original width and height are scaled, and almost all page elements are misaligned
This is a simple piece of html, but it speaks volumes.
html_code=""'
<div class="container">
<div class="left-area">
<div class="top">
<a href="https://www.hzau.edu.cn/" >
<i class="logo"></i>
</a>
<div class="horizontal-line"></div>
</div>
<div class="middle">
<ul class="page-list">
<li class="item">
<i class="icon icon-star"></i>
<span class="desc active">教育大模型问答</span>
</li>
<li class="item">
<i class="icon icon-template"></i>
<span class="desc">用户问答示例</span>
</li>
<li class="item">
<i class="icon icon-file"></i>
<span class="desc">规章制度文件</span>
</li>
<li class="item">
<i class="icon icon-other"></i>
<span class="desc">其他内容待补充...</span>
</li>
</ul>
</div>
<div class="bottom">
<div class="left">
<img class="profile" src="/file=images/profile_default.png" alt="用户头像">
<span class="desc">系统默认用户</span>
</div>
<div class="right">
<i class="icon-exit"></i>
</div>
</div>
</div>
<div class="right-area">
<div class="top">
<h2 class="title">教育大模型v1.0</h2>
<div class="tool-bar">
<div class="search-area">
<i class="search-icon"></i>
<input class="search-input" type="search" placeholder="搜索华农规章制度"></input>
</div>
<i class="enter-icon"></i>
<img class="profile" src="/file=images/profile_default.png" alt="用户头像">
</div>
</div>
<div class="version"></div>
<div class="bottom">
<input class="text-input" type="text" placeholder="请在此输入问题..." >
<button class="submit">发送问题</button>
</div>
<div class="warning">
<span >回答由AI大模型生成,可能带有主观性和随机性,请仔细甄别!</span>
</div>
<div class="footer">
<span class="copyright">© 2024 HuaZhong Agriculture university. All Rights Reserved.</span>
<a class="hzau-home" href="https://www.hzau.edu.cn/">访问华农官网></a>
</div>
</div>
</div>
'''
with gr.Blocks(css=css_code, fill_height=True) as demo:
output= gr.HTML(html_code)
demo.launch(allowed_paths=['./'], share=True)
enter image description here
enter image description here
I checked all gradio documents, but unfortunately there is no clear description, nor the relevant chapters on custom HTML pages, I just want to make my human-machine dialog page look good, that’s all!
You need to sign in to view this answers