Upload app.py

app.py

@@ -16,267 +16,17 @@ css = """
 .title { font-size: 3em; align-items: center; text-align: center; }
 .info { align-items: center; text-align: center; }
 .block.result { margin: 1em 0; padding: 1em; box-shadow: 0 0 3px 3px #664422, 0 0 3px 2px #664422 inset; border-radius: 6px; background: #665544; }
-
-.block.result p,
-.block.result .prose,
-.block-result * {
-    color: aquamarine;
-    font-family: "Atma", monospace !important;
-    font-size: 1.06em;
-    letter-spacing: 0.50px;
-    word-spacing: 6px;
-}
-/* I know that I use a lot of !important instruction..
-   Yeah, I know it's not really properly recommended to use !important instruction when writing CSS rules ..
-   But it's because that Gradio interface use also a custom css-theme in gr.Blocks() from: "NoCrypt/miku@>=1.2.2"
-   And all my !important instructions are for avoiding to get unexpected superceeded by that "NoCrypt/miku@>=1.2.2" css theme skin...
-   No more, no less!
-*/
-.setting_tag::before {
-    content: "::";
-    font-family: system-ui, monospace !important;
-    font-size: 1.2em !important;
-    color: #736819 !important;
-    font-weight: bold;
-    display: block;
-    text-align: center !important;
-    margin: 0 auto !important;
-}
-.setting_tag {
-    margin-top: 1em !important;
-    font-size: 1.4em !important;
-    color: darkgoldenrod !important;
-    padding: 10px !important;
-    font-weight: normal !important;
-    border: 2px dotted gold !important;
-    background: white !important;
-    word-break: break-word !important;
-    display: block;
-    text-align: center !important;
-    margin: 0 auto !important;
-    text-shadow: 1px 1px 1px gold !important;
-}
-.setting_tag::after {
-    content: "::";
-    font-family: system-ui, monospace !important;
-    font-size: 1.2em !important;
-    color: #736819 !important;
-    font-weight: bold !important;
-    display: block !important;
-    text-align: center !important;
-    margin: 0 auto !important;
-}
-a.linkify_1,
-a.linkify_1:focus,
-a.linkify_1:visited {
-    color: red !important;
-    text-decoration: underline !important;
-}
-a.linkify_1:active,
-a.linkify_1:hover {
-    color: darkred !important;
-    text-decoration: overline !important;
-}
-.details_info_block_expanded_override {
-    font-size: 0.95em !important;
-    color: grey !important;
-    padding: 10px !important;
-    font-weight: bold;
-    border: none !important;
-    box-shadow: 1px 1px 2px 3px whitesmoke, 3px 2px 1px 1px grey !important;
-    background: whitesmoke !important;
-    word-break: break-word !important;
-}
-.details_info_block {
-    font-size: 0.95em !important;
-    color: grey !important;
-    padding: 10px !important;
-    font-weight: bold;
-    border: none !important;
-    box-shadow: 1px 1px 2px 3px whitesmoke, 3px 2px 1px 1px grey !important;
-    background: whitesmoke !important;
-    word-break: break-word !important;
-    height: initial !important;
-    max-height: initial !important;
-    overflow: auto !important;
-}
-.details_info_block[is-expanded="False"]::before {
-    content: "(double-click to expand help...)";
-    user-select: none;
-    cursor: pointer;
-    font-family: "Atma" !important;
-    font-weight: 500 !important;
-    letter-spacing: 2px !important;
-    word-spacing: 5px !important;
-    color: darkmagenta !important;
-    display: inline-block !important;
-    font-size: 0.99em !important;
-    background: whitesmoke !important;
-    padding: 10px !important;
-    border: 2px solid black !important;
-}
-.details_info_block[is-expanded="False"] {
-    transition: 1.2s all;
-    height: 80px !important;
-    max-height: 80px !important;
-    overflow: hidden !important;
-}
-.details_info_block[is-expanded="True"]::before {
-    content: "(double-click to reduce help...)";
-    user-select: none;
-    cursor: pointer;
-    font-family: "Atma" !important;
-    font-weight: 500 !important;
-    letter-spacing: 2px !important;
-    word-spacing: 5px !important;
-    color: white !important;
-    display: block !important;
-    font-size: 0.99em !important;
-    background: #1c9e5c !important;
-    padding: 10px !important;
-    border: 2px solid black !important;
-    border-radius: 0px !important;
-    margin-bottom: 1em !important;
-}
-.details_info_block[is-expanded="True"] {
-    transition: 1.2s all;
-    height: initial !important;
-    max-height: initial !important;
-    overflow: auto !important;
-    margin-bottom: 1em !important;
-}
-.em_warning {
-    font-family: "Atma", system-ui !important;
-    font-weight: 400 !important;
-    font-style: normal !important;
-    font-size: 1.3em !important;
-    word-spacing: 3.2px !important;
-    color: orangered !important;
-}
-.spanify_safetensors_base_model {
-    font-family: "Nunito", system-ui, monospace !important;
-    font-weight: 600;
-    color: green !important;
-}
-.spanify_safetensors_checkpoint_model {
-    font-family: "Nunito", system-ui, monospace !important;
-    font-weight: 600;
-    color: orange !important;
-}
-.spanify_vae_model {
-    font-family: "Nunito", system-ui, monospace !important;
-    font-weight: 600;
-    color: deeppink !important;
-}
-.spanify_lora_checkpoint_model {
-    font-family: "Nunito", system-ui, monospace !important;
-    font-weight: 600;
-    color: #8c627b !important;
-}
-.spanify_other_model {
-    font-family: "Nunito", system-ui, monospace !important;
-    font-weight: 600;
-    color: silver !important;
-}
-.setting_tag_as_mini {
-    font-family: "Nunito", serif !important;
-    font-optical-sizing: auto !important;
-    font-weight: 600 !important;
-    font-size: 1.2em !important;
-    color: darkgoldenrod !important;
-    padding: 4px !important;
-    border: 2px dashed gold !important;
-    background: white !important;
-    word-break: break-word !important;
-    display: inline-block !important;
-    text-shadow: 1px 1px 1px gold !important;
-}
-li.has_divider_1 {
-    list-style: none;
-}
-li.has_divider_1 > div.is_divider_1 {
-    display: inline-block;
-    width: 100%;
-    height: 0.4em;
-    background: burlywood;
-}
-.accordion-element,
-.accordion-element button:not(.reset-button):not(.primary),
-.accordion-element button:not(.reset-button):not(.primary) * {
-    background: navy !important;
-    color: white !important;
-    font-family: "Nunito", serif !important;
-    font-optical-sizing: auto !important;
-    font-weight: 600 !important;
-    font-size: 1.2em !important;
-}
-/* the issue with a Gradio gr.Tab() component,
-is that if we specify a CSS class for it through
-the declaration of the well-said component, then,
-it would be useless as it don't permit to targetting
-the TRUE button tab clickable DOMElement..
-so this is a workaround which assume the TAB is at that XPath (at least for Gradio version 5) */
-/* any NOT active Gradio tab : */
-.tab-wrapper .tab-container[role="tablist"] button[role="tab"]:not(.selected) {
-    background: red !important;
-    color: white !important;
-    font-family: "Nunito", serif !important;
-    font-optical-sizing: auto !important;
-    font-weight: 600 !important;
-    font-size: 1.2em !important;
-}
-/* the CURRENT active Gradio tab : */
-.tab-wrapper .tab-container[role="tablist"] button[role="tab"].selected {
-    background: green !important;
-    color: white !important;
-    font-family: "Nunito", serif !important;
-    font-optical-sizing: auto !important;
-    font-weight: 600 !important;
-    font-size: 1.6em !important;
-}
-/* here we only target Gradio button
-that are reset-button
-IN an accordion-element classe */
-.accordion-element button.reset-button {
-    background: #803e3e !important;
-    color: white !important;
-    font-family: "Atma", serif !important;
-    font-weight: 700 !important;
-    font-style: normal !important;
-}
-/* here we only target Gradio button
-that are primary
-IN an accordion-element classe */
-.accordion-element button.primary {
-    background: #5f925e !important;
-    font-size: 1.6em !important;
-    font-style: oblique !important;
-    font-weight: normal !important;
-    text-transform: uppercase !important;
-    letter-spacing: 1px !important;
-    border-bottom-right-radius: 100em !important;
-    border-bottom-left-radius: 100em !important;
-    font-family: "Atma", serif !important;
-    font-weight: 700 !important;
-    font-style: normal !important;
-}
 """
 
 
 help_dict = {
     "hf_username": """
-        <article class="setting_tag" use-webfont="wf-nunito-regular">
-            (hf_username)
-        </article>
         <div class="details_info_block_expanded_override"
             use-webfont="wf-atma-light"
             >
             <em>Your HuggingFace username, no more, no less</em>
         </div>""",
     "hf_write_token_access": """
-        <article class="setting_tag" use-webfont="wf-nunito-regular">
-            (hf_write_token_access)
-        </article>
         <div class="details_info_block"
             is-expanded="False"
             ondblclick="makeExpandable(this);"