【간단 폭속 제 3 탄】 HTML 필요없이 웹 앱을 만들 수있는 Streamlit에서 HTML을 사용할 수있게되었습니다

8099 단어 Python3HTML자바스크립트pipStreamlit

소개



Python 파일만으로 웹 앱을 만들 수 있는 Streamlit의 도입에 대해서는 여기 이나 여기 를 봐 주세요.

이번에는 그런 HTML 파일 필요 없는 Streamlit에서 마침내 HTML을 사용할 수 있게 되었으므로, 시도해 가고 싶습니다.

먼저 streamlit --version 에서 현재 버전을 확인하십시오. 0.63 이하라면 동작하지 않습니다.
pip install --upgrade pip
pip install -U streamlit

에서 업데이트합시다.

components.html()



그러면 새로운 기능을 사용해 보겠습니다. Streamlit은 st.text 이나 st.markdown ,st.write 를 사용하면 앱에 문장을 표시하는 것이 가능했습니다.

그렇지만 때로는 충실한 외형의 멋진 어플로 하고 싶을 때나, 자신 취향의 외형의 문장을 표시시키고 싶을 때가 있지요. 그런 때에 사용할 수 있는 것이 components.html() 입니다.

조속히, 다른 것과의 차이를 보면서 실장해 갑니다.

app.py
import streamlit as st
import streamlit.components.v1 as stc

st.write('Streamlit is cool.')
st.text('Streamlit is cool.')
st.markdown('Streamlit is **_really_ cool**.')
stc.html("<p style='color:red;'> Streamlit is Awesome")



이렇게 보면 차이를 잘 알 수 있네요.

HTML 뿐만 아니라 CSS나 Javascript도 끈질긴 움직임이 있는 사이트 구축도 가능합니다.
시험에 다음 사이트에서 붙여 넣습니다.
htps //w w. w3s 쵸오 ls. 이 m/호 w와/호 w와 _js_타 b_이 mg_가 ry. 아 sp

app.py
stc.html("""
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        * {
        box-sizing: border-box;
        }

        body {
        margin: 0;
        font-family: Arial;
        }

        /* The grid: Four equal columns that floats next to each other */
        .column {
        float: left;
        width: 25%;
        padding: 10px;
        }

        /* Style the images inside the grid */
        .column img {
        opacity: 0.8; 
        cursor: pointer; 
        }

        .column img:hover {
        opacity: 1;
        }

        /* Clear floats after the columns */
        .row:after {
        content: "";
        display: table;
        clear: both;
        }

        /* The expanding image container */
        .container {
        position: relative;
        display: none;
        }

        /* Expanding image text */
        #imgtext {
        position: absolute;
        bottom: 15px;
        left: 15px;
        color: white;
        font-size: 20px;
        }

        /* Closable button inside the expanded image */
        .closebtn {
        position: absolute;
        top: 10px;
        right: 15px;
        color: white;
        font-size: 35px;
        cursor: pointer;
        }
        </style>
        </head>
        <body>

        <div style="text-align:center">
        <h2>Tabbed Image Gallery</h2>
        <p>Click on the images below:</p>
        </div>

        <!-- The four columns -->
        <div class="row">
        <div class="column">
            <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
        </div>
        <div class="column">
            <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
        </div>
        </div>

        <div class="container">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <img id="expandedImg" style="width:100%">
        <div id="imgtext"></div>
        </div>

        <script>
        function myFunction(imgs) {
        var expandImg = document.getElementById("expandedImg");
        var imgText = document.getElementById("imgtext");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.parentElement.style.display = "block";
        }
        </script>

        </body>
        </html>

        """,height = 500)

height가 디폴트라고 150이므로 거기만 조정하고 있습니다.

components.iframe()


components.iframe 는 components.html 와 달리 URL을 입력으로 받습니다. 앱에 전체 페이지를 포함하고 싶은 경우 등에 사용하십시오.

app.py
stc.html("""
                <a class="twitter-timeline"
                href="https://twitter.com/streamlit?ref_src=twsrc%5Etfw">Tweets by streamlit</a>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                """
                )
stc.iframe("https://docs.streamlit.io/en/stable/develop_streamlit_components.html",scrolling=True)



더욱 충실한 프론트를 만들기 위해



분명히 개발 환경에
- node.js
- npm 또는 yarn
를 구축해, Javascript 단체로 움직이는 것 같은 환경을 만들면, 한층 더 충실한 기능을 사용할 수 있는 것 같네요.
공식 템플릿
이쪽도 시도하고 싶습니다.

마지막으로



components를 사용하면 더욱 웹 사이트 같은 것을 쉽게 만들 수있게되었습니다.
단지 streamlit.components 가 아니라 v1 가 붙어 있는 것은 앞으로 더욱 기능을 확충시킬 예정일까요? 그렇다면 기대하네요.

pip install이 통과하지 못하는 경우 module install
Windows에서 PIP Install 하면 SSL 에러가 되는 것을 해소한다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage