How can I directly use streamlit to create sidebars similar to those in pictures?

[Bruce_Yin]

How can I directly use streamlit to create sidebars similar to those in pictures?

[blackary]

One option is to use this library GitHub - arnaudmiribel/stoc to create a table-of-contents section in the sidebar.

Is that what you’re looking for?

[Bruce_Yin]

Yes, it’s great! In fact, I want to read Word documents（Such as a xxx.doc or xxx.docx document） with images and text directly through Streamlit. What’s a good solution?

[blackary]

@Bruce_Yin In my experience, .docx tend to be easier to work with, because they use a more open standard than .doc files. I haven’t used this particular library, but this looks like it would be a good library to use: python-docx — python-docx 0.8.11 documentation

[Bruce_Yin]

Yes, the files I intend to display using streamlit are all in .docx format. As far as you know, is there a better way or demo to render .docx files directly through streamlit? thanks！

[blackary]

Here’s one way, using the mammoth library, which can convert docx into either markdown or html

import mammoth
import streamlit as st
import streamlit.components.v1 as components

uploaded = st.file_uploader("Upload docx", type="docx")

if uploaded is not None:
    md, html = st.tabs(["Markdown", "HTML"])
    with md:
        result = mammoth.convert_to_markdown(uploaded).value
        st.markdown(result)
    with html:
        result = mammoth.convert_to_html(uploaded).value
        components.html(result, height=500, scrolling=True)

[Bruce_Yin]

Great! My DOCX document can be displayed. May I ask how to display the directory structure in DOCX in the sidebar through variable result and stoc()? (how do I loop out from variable result?)

[blackary]

Iterating on the stoc library I referenced before, this is one way you could accomplish it – just get the markdown from mammoth, and pass it to stoc.from_markdown

streamlit_app.py

import streamlit as st

from stoc2 import stoc

text = """
# Testing

Some stuff

## More stuff

### Even more stuff

More stuff?

_italics_

List:
* A
* B
* C

# New H1

"""

stoc.from_markdown(text)

stoc2.py

import streamlit as st
import unidecode

DISABLE_LINK_CSS = """
<style>
a.toc {
    color: inherit;
    text-decoration: none; /* no underline */
}
</style>"""


class stoc:
    def __init__(self):
        self.toc_items = list()

    def _h1(self, text):
        self.toc_items.append(("h1", text))

    def _h2(self, text):
        self.toc_items.append(("h2", text))

    def _h3(self, text):
        self.toc_items.append(("h3", text))

    def toc(self):
        st.write(DISABLE_LINK_CSS, unsafe_allow_html=True)
        st.sidebar.caption("Table of contents")
        markdown_toc = ""
        for title_size, title in self.toc_items:
            h = int(title_size.replace("h", ""))
            markdown_toc += (
                " " * 2 * h
                + "- "
                + f'<a href="#{normalize(title)}" class="toc"> {title}</a> \n'
            )
        st.sidebar.write(markdown_toc, unsafe_allow_html=True)

    @classmethod
    def from_markdown(cls, text: str):
        self = cls()
        for line in text.splitlines():
            if line.startswith("###"):
                self._h3(line[3:])
            elif line.startswith("##"):
                self._h2(line[2:])
            elif line.startswith("#"):
                self._h1(line[1:])
        st.write(text)
        self.toc()


def normalize(s):
    """
    Normalize titles as valid HTML ids for anchors
    >>> normalize("it's a test to spot how Things happ3n héhé")
    "it-s-a-test-to-spot-how-things-happ3n-h-h"
    """

    # Replace accents with "-"
    s_wo_accents = unidecode.unidecode(s)
    accents = [s for s in s if s not in s_wo_accents]
    for accent in accents:
        s = s.replace(accent, "-")

    # Lowercase
    s = s.lower()

    # Keep only alphanum and remove "-" suffix if existing
    normalized = (
        "".join([char if char.isalnum() else "-" for char in s]).strip("-").lower()
    )

    return

[arnaud]

Where’s the pull request @blackary??? Pull requests · arnaudmiribel/stoc · GitHub

[blackary]

Right there, @arnaud Add from_markdown method by blackary · Pull Request #1 · arnaudmiribel/stoc · GitHub