项目实训记录4

展示一下现在的前端界面。

代码：

def welcome(name):
return f"Welcome to Gradio, {name}!"

js = """
function createGradioAnimation() {
var container = document.createElement('div');
container.id = 'gradio-animation';
container.style.fontSize = '2em';
container.style.fontWeight = 'bold';
container.style.textAlign = 'center';
container.style.marginBottom = '20px';
container.style.color = 'white';

var text = 'Welcome to Gradio!';
for (var i = 0; i < text.length; i++) {
(function(i){
setTimeout(function(){
var letter = document.createElement('span');
letter.style.opacity = '0';
letter.style.transition = 'opacity 0.5s';
letter.innerText = text[i];

container.appendChild(letter);

setTimeout(function() {
letter.style.opacity = '1';
}, 50);
}, i * 250);
})(i);
}

var gradioContainer = document.querySelector('.gradio-container');
gradioContainer.insertBefore(container, gradioContainer.firstChild);

return 'Animation created';
}
"""

#file=http://localhost:8000/background3.gif
css="""
.gradio-container {
background: url('file=http://localhost:8000/background3.gif') no-repeat center center; /* 确保 URL 是正确的 */
background-color: #192a56;
background-size: cover; /* 宽度100%，高度自适应 */
margin-left: 0px; /* 左边边距 */
margin-right: 0px; /* 右边边距 */
}
.image {background-color: #dfe4ea}
.text {
background-color: #dfe4ea
}
.text textarea {
background-color: #f1f2f6;
font-size: 20px !important;
}
"""

def f1(sketch, in_text):

return "http://localhost:8000/Anya Forger.glb"

with gr.Blocks(js=js, css=css) as demo:
with gr.Row():
sketchpad = gr.Sketchpad(label="绘制图像")
inp_text = gr.Textbox(lines=8, label="输入文本", placeholder="请输入产品描述")
btn_generate = gr.Button("生成图像")
out_model = gr.Model3D(clear_color=[0.0, 0.0, 0.0, 0.0], label="3D模型")

with gr.Row():
output_images = [gr.Image(label=f"Image {i + 1}") for i in range(6)]
with gr.Row():
checkboxes = [gr.Checkbox(label=f"选择 {i + 1}") for i in range(6)]
btn_process = gr.Button("处理选中图像")
final_image = gr.Image()

#btn_generate.click(process_image, inputs=[sketchpad, inp_text], outputs=output_images)
btn_generate.click(f1, inputs=[sketchpad, inp_text], outputs=out_model)
#btn_process.click(collect_inputs, inputs=checkboxes + [inp_text], outputs=final_image)

demo.launch()