Gradio.Net 开发指南 -- 控制布局

目录控制布局Controlling Layout行Rows列与嵌套Columns and Nesting填充浏览器高度/宽度Fill Browser Height / Width尺寸Dimensions标签页与折叠面板Tabs and Accordions侧边栏Sidebar可见性Visibility分开定义和渲染组件Defining and Rendering Components Separately总结上一篇Gradio.Net (https://github.com/feiyun0112/Gradio.Net)是一个开源的 .NET 库它是 Gradio 的 .NET 移植版本允许你为机器学习模型、API 或任何 C# 函数快速构建演示或 Web 应用程序无需任何 JavaScript、CSS 或 Web 开发经验控制布局Controlling Layout默认情况下Blocks 中的组件是垂直排列的。让我们来看看如何重新排列组件。底层使用了 flexbox 网页布局模型。行Rows在using (gr.Row())子句中创建的元素将水平显示。例如并排显示两个按钮using Gradio.Net; using var demo gr.Blocks(); using (gr.Row()) { var btn1 gr.Button(Button 1); var btn2 gr.Button(Button 2); } await demo.Launch();可以通过equalHeight参数设置行中所有元素等高using (gr.Row(equalHeight: true)) { var textbox gr.Textbox(); var btn2 gr.Button(Button 2); }可以通过每个组件都有的scale和minWidth参数来控制行中元素的宽度‎scale是一个整数定义了元素在行中占据的空间比例。如果设置为 ‎0元素不会扩展。如果设置为 ‎1或更大元素将按比例扩展。‎minWidth设置元素的最小宽度。如果没有足够的空间满足所有 ‎minWidth值Row 会换行。using (gr.Row()) { var btn0 gr.Button(Button 0, scale: 0); var btn1 gr.Button(Button 1, scale: 1); var btn2 gr.Button(Button 2, scale: 2); }列与嵌套Columns and NestingColumn 内的组件将垂直叠放。由于 Blocks 应用默认就是垂直布局Column 通常与 Row 结合嵌套使用using Gradio.Net; using Gradio.Net.Components; using var demo gr.Blocks(); using (gr.Row()) { gr.Textbox(label: t1); gr.Textbox(label: s2); gr.Dropdown(choices: new Liststring { a, b, c }, label: d3); } using (gr.Row()) { using (gr.Column(scale: 1, minWidth: 300)) { gr.Textbox(label: prompt 1); gr.Textbox(label: prompt 2); gr.Button(Between); gr.Textbox(label: prompt 1); gr.Textbox(label: prompt 2); } using (gr.Column(scale: 2, minWidth: 300)) { gr.Image(); gr.Button(Go); } } await demo.Launch();第一列有两个垂直排列的 Textbox第二列有一个 Image 和 Button。两列的相对宽度由scale参数设置。scale值为 2 的列占据scale值为 1 的列两倍的宽度。填充浏览器高度/宽度Fill Browser Height / Width要让应用占满浏览器的全宽去掉两侧内边距使用gr.Blocks(fillWidth: true)。要让顶层组件扩展至占满浏览器全高使用fillHeight参数并对扩展组件应用scaleusing Gradio.Net; using var demo gr.Blocks(fillHeight: true); gr.Chatbot(scale: 1); gr.Textbox(scale: 0); await demo.Launch();尺寸Dimensions某些组件支持设置高度和宽度。这些参数接受数字解释为像素或字符串。使用字符串可以直接应用任何 CSS 单位。以下是使用视口宽度vw的示例using Gradio.Net; using var demo gr.Blocks(); gr.ImageEditor(width: 50vw); await demo.Launch();标签页与折叠面板Tabs and Accordions可以使用using (gr.Tab(tab_name))子句创建标签页。在using (gr.Tab(tab_name))上下文中创建的任何组件都会出现在该标签页中。连续的 Tab 子句会组合在一起使得每次只能选择一个标签页并且只显示该标签页上下文中的组件。using Gradio.Net; using Gradio.Net.Components; string FlipText(string x) { return new string(x.Reverse().ToArray()); } using var demo gr.Blocks(); gr.Markdown(Flip text or image files using this demo.); using (gr.Tabs()) { using (gr.Tab(Flip Text)) { var textInput gr.Textbox(label: Input); var textOutput gr.Textbox(label: Output); var textButton gr.Button(Flip); textButton.Click(fn: FlipText, inputs: textInput, outputs: textOutput); } using (gr.Tab(Flip Image)) { using (gr.Row()) { gr.Image(); gr.Image(); } gr.Button(Flip); } } using (gr.Accordion(label: Open for More!, open: false)) { gr.Markdown(Look at me...); gr.Slider(minimum: 0, maximum: 1, value: 0.1, step: 0.1, interactive: true, label: Slide me); } await demo.Launch();还要注意示例中的gr.Accordion(label)。Accordion 是一种可以折叠或展开的布局。与 Tabs 一样它是一个可以有选择地隐藏或显示内容的布局元素。在using (gr.Accordion(label))中定义的任何组件当折叠面板的切换图标被点击时都会隐藏或显示。侧边栏Sidebar侧边栏是一个可折叠的面板在屏幕左侧渲染子组件可以展开或折叠。using Gradio.Net; using Gradio.Net.Components; string GeneratePetName(string animalType, string personality) { var cutePrefixes new[] { Fluffy, Ziggy, Bubbles, Pickle, Waffle, Mochi, Cookie, Pepper }; var animalSuffixes new Dictionarystring, string[] { [Cat] new[] { Whiskers, Paws, Mittens, Purrington }, [Dog] new[] { Woofles, Barkington, Waggins, Pawsome }, [Bird] new[] { Feathers, Wings, Chirpy, Tweets }, [Rabbit] new[] { Hops, Cottontail, Bouncy, Fluff } }; var prefix cutePrefixes[Random.Shared.Next(cutePrefixes.Length)]; var suffix animalSuffixes[animalType][Random.Shared.Next(animalSuffixes[animalType].Length)]; if (personality Silly) prefix new[] { Sir, Lady, Captain, Professor }[Random.Shared.Next(4)] prefix; else if (personality Royal) suffix the new[] { Great, Magnificent, Wise, Brave }[Random.Shared.Next(4)]; return ${prefix} {suffix}; } using var demo gr.Blocks(); using (gr.Sidebar()) { gr.Markdown(# Pet Name Generator); gr.Markdown(Use the options below to generate a unique pet name!); } var animalType gr.Dropdown( choices: new Liststring { Cat, Dog, Bird, Rabbit }, label: Choose your pet type, value: Cat); var personality gr.Radio( choices: new Liststring { Normal, Silly, Royal }, label: Personality type, value: Normal); var nameOutput gr.Textbox(label: Your pets fancy name:, lines: 2); var generateBtn gr.Button(Generate Name! , variant: primary); generateBtn.Click( fn: GeneratePetName, inputs: new ListComponent { animalType, personality }, outputs: nameOutput); await demo.Launch();可见性Visibility组件和布局元素都有visible参数可以初始设置并在之后更新。通过在 Column 上设置gr.Column(visible: ...)可以显示或隐藏一组组件using Gradio.Net; using Gradio.Net.Components; using var demo gr.Blocks(); var nameBox gr.Textbox(label: Name); var ageBox gr.Number(label: Age); var symptomsBox gr.CheckboxGroup( choices: new Liststring { Cough, Fever, Runny Nose }, label: Symptoms); var submitBtn gr.Button(Submit); Gradio.Net.Core.Layouts.Column outputCol; Textbox diagnosisBox; Textbox patientSummaryBox; using (outputCol gr.Column(visible: false)) { diagnosisBox gr.Textbox(label: Diagnosis); patientSummaryBox gr.Textbox(label: Patient Summary); } submitBtn.Click( fn: (string name, double age, Liststring symptoms) { string diagnosis symptoms ! null symptoms.Contains(Cough) ? covid : flu; string summary ${name}, {(int)age} y/o; return new object[] { gr.Button(visible: false), gr.Column(visible: true, render: false), gr.Textbox(value: diagnosis), gr.Textbox(value: summary) }; }, inputs: new ListComponent { nameBox, ageBox, symptomsBox }, outputs: new Listobject { submitBtn, outputCol, diagnosisBox, patientSummaryBox }); await demo.Launch();分开定义和渲染组件Defining and Rendering Components Separately在某些情况下你可能希望在 UI 中实际渲染组件之前先定义它。例如你可能希望在对应的gr.Textbox输入组件上方显示示例部分。由于gr.Examples需要输入组件对象作为参数你需要先定义输入组件然后在定义了gr.Examples对象之后再渲染它。解决方法是在gr.Blocks()上下文之外定义gr.Textbox并使用组件的.render()方法将其放置在 UI 中想要的位置。类似地如果你已经在 Gradio.Net 应用中定义了一个组件但希望取消渲染以便在应用的不同部分重新定义可以调用.unrender()方法。总结本章介绍了 Gradio.Net 中控制布局的各种方式‎Row行使用 ‎using (gr.Row())水平排列组件通过 ‎scale控制比例‎Column列使用 ‎using (gr.Column())垂直排列与 Row 嵌套使用‎填充高度/宽度‎fillHeight和 ‎fillWidth参数让应用占满浏览器‎Tab标签页使用 ‎using (gr.Tab(名称))创建多标签页切换界面‎Accordion折叠面板使用 ‎using (gr.Accordion(名称))创建可折叠内容‎Sidebar侧边栏使用 ‎using (gr.Sidebar())创建可折叠侧边栏‎Visibility可见性通过 ‎visible参数动态控制组件和布局的显示/隐藏引入地址