| import gradio as gr | |
| from shared.utils.plugins import WAN2GPPlugin | |
| class GuidesPlugin(WAN2GPPlugin): | |
| def __init__(self): | |
| super().__init__() | |
| self.name = "Guides Tab" | |
| self.version = "1.0.0" | |
| self.description = "Guides for using WAN2GP" | |
| self.goto_model_type = None | |
| def setup_ui(self): | |
| self.request_component("state") | |
| self.request_component("main_tabs") | |
| self.request_component("model_choice_target") | |
| self.request_global("goto_model_type") | |
| self.add_custom_js(self._script_block()) | |
| self.add_tab( | |
| tab_id="info", | |
| label="Guides", | |
| component_constructor=self.create_guides_ui, | |
| ) | |
| def create_guides_ui(self): | |
| with open("docs/VACE.md", "r", encoding="utf-8") as reader: | |
| vace= reader.read() | |
| with open("docs/MODELS.md", "r", encoding="utf-8") as reader: | |
| models = reader.read() | |
| with open("docs/LORAS.md", "r", encoding="utf-8") as reader: | |
| loras = reader.read() | |
| with open("docs/FINETUNES.md", "r", encoding="utf-8") as reader: | |
| finetunes = reader.read() | |
| with open("docs/PLUGINS.md", "r", encoding="utf-8") as reader: | |
| plugins = reader.read() | |
| with open("docs/OVERVIEW.md", "r", encoding="utf-8") as reader: | |
| overview = reader.read() | |
| with gr.Tabs(): | |
| with gr.Tab("Overview", id="overview"): | |
| gr.Markdown(overview, elem_id="guides_overview_markdown") | |
| gr.HTML("<style>.guides-hidden-controls{display:none !important;}</style>") | |
| with gr.Row(elem_classes="guides-hidden-controls"): | |
| model_selection = gr.Text(value="", label="", elem_id="guides_overview_target") | |
| apply_btn = gr.Button("Apply Selection", elem_id="guides_overview_trigger") | |
| apply_btn.click( | |
| fn=self._apply_overview_selection, | |
| inputs=[self.state, model_selection], | |
| outputs=[self.model_choice_target], | |
| show_progress="hidden" | |
| ).then( | |
| fn=self.goto_video_tab, | |
| inputs=[self.state], | |
| outputs=[self.main_tabs] | |
| ) | |
| with gr.Tab("Loras", id="loras"): | |
| gr.Markdown(loras) | |
| with gr.Tab("Vace", id="vace"): | |
| gr.Markdown(vace) | |
| with gr.Tab("Finetunes", id="finetunes"): | |
| gr.Markdown(finetunes) | |
| with gr.Tab("Plugins", id="plugins"): | |
| gr.Markdown(plugins) | |
| def _apply_overview_selection(self, state, model_type): | |
| return model_type | |
| def _script_block(self) -> str: | |
| return """ | |
| (function () { | |
| const RETRY_DELAY = 500; | |
| function root() { | |
| if (window.gradioApp) return window.gradioApp(); | |
| const app = document.querySelector("gradio-app"); | |
| return app ? (app.shadowRoot || app) : document; | |
| } | |
| function bindOverviewLinks() { | |
| const appRoot = root(); | |
| if (!appRoot) return false; | |
| const markdown = appRoot.querySelector("#guides_overview_markdown"); | |
| const targetInput = appRoot.querySelector("#guides_overview_target textarea, #guides_overview_target input"); | |
| let triggerButton = appRoot.querySelector("#guides_overview_trigger"); | |
| if (!markdown || !targetInput || !triggerButton) return false; | |
| if (!triggerButton.matches("button")) { | |
| const innerButton = triggerButton.querySelector("button"); | |
| if (innerButton) triggerButton = innerButton; | |
| } | |
| if (markdown.dataset.guidesBound === "1") return true; | |
| markdown.dataset.guidesBound = "1"; | |
| markdown.addEventListener("click", (event) => { | |
| const anchor = event.target.closest("a"); | |
| if (!anchor) return; | |
| const hrefValue = anchor.getAttribute("href") || ""; | |
| if (!hrefValue.startsWith("modeltype:")) return; | |
| event.preventDefault(); | |
| const modelType = hrefValue.replace("modeltype:", "").trim(); | |
| if (!modelType) return; | |
| targetInput.value = modelType; | |
| targetInput.dispatchEvent(new Event("input", { bubbles: true })); | |
| triggerButton.click(); | |
| }); | |
| return true; | |
| } | |
| function ensureBinding() { | |
| if (!bindOverviewLinks()) setTimeout(ensureBinding, RETRY_DELAY); | |
| } | |
| ensureBinding(); | |
| })(); | |
| """ | |