Categories
Computer

แสดงข้อมูลจากไพทอนมาหน้าเว็บด้วย Streamlit

ปกติเวลาแสดงข้อมูลในไพทอนที่เราเคยทำก็จะเป็นการเซฟเป็นไฟล์แล้วนำข้อมูลออกมาปรับแต่งเพื่อให้แสดงข้อมูลให้สวยงามผ่านโปรแกรมอื่นใช่ไหมครับ แต่ทีนี้เราต้องการแสดงข้อมูลผ่านทางหน้าเว็บก็ต้องใช้เครื่องมืออื่นช่วย อย่างเช่น Flask, Django ซึ่งฟังดูแล้วยุ่งยากไปหน่อย เลยคิดว่าน่าจะมีเครื่องมือนี้มาช่วยจะดีกว่านี้

ซึ่งมันก็มีจริง เครื่องมือที่แสดงข้อมูลให้สวยงามได้โดยการใช้ไลบรารีอย่าง Streamlit

ไลบรารีนี้เป็นตัวช่วยที่ทำให้เราสร้างหน้าเว็บได้อย่างปังปุริเย่โดยที่เราไม่ต้องเขียนหน้า HTML, CSS, JavaScript เอง เพียงแค่เขียนด้วยภาษาไพทอนไม่กี่บรรทัด ก็สามารถแสดงหน้าเว็บออกมาได้อย่างสวยงามแล้ว

การติดตั้ง

การติดตั้งทำได้อย่างไรล่ะ? ทำได้ง่ายมาก เพียงแค่พิมพ์คำสั่ง

ติดตั้งไลบรารี

กด Enter จะพบว่าตัวโปรแกรมจะติดตั้งไลบรารีตัวนี้ให้เรียบร้อย เราสามารถทดลองใช้งานได้โดยพิมพ์คำสั่งตามด้านล่างนี้

ทดลองเรียกใช้งานได้ตามภาพ

เมื่อเรียกใช้งานแล้ว จะพบหน้าเว็บแสดงหน้าตัวอย่างการใช้งานแล้ว

ตัวอย่างการใช้งาน

การเรียกใช้งาน

การเรียกใช้งานไลบรารีตัวนี้ทำได้ง่ายโดยนำเข้าไลบรารีด้วยพิมพ์คำสั่งไพทอนว่า

การนำเข้าไลบรารี

เมื่อนำเข้าเสร็จแล้ว ต่อมาเราพิมพ์คำสั่งเพื่อสร้างหน้าจอออกมาเป็นหน้าเว็บได้โดยพิมพ์ไม่กี่คำสั่งตามด้านล่างนี้

ตัวอย่างคำสั่ง Streamlit

คำสั่ง st.write ตามภาพด้านบนเป็นคำสั่งที่มีหน้าที่เขียนข้อความ HTML หรือโค้ดด้วยภาษา Markdown ลงไปในหน้าเว็บตามที่เราต้องการ จากนั้นเราเปิดให้แสดงผลหน้าเว็บโดยพิมพ์คำสั่ง

คำสั่งให้เริ่มต้นการแสดงผลออกมาหน้าเว็บ

เมื่อพิมพ์เสร็จแล้ว เราจะเห็นการแสดงผลออกมาทางหน้าเว็บที่เราต้องการแล้วตามภาพ เวลาที่เราแก้ไขไฟล์ในไพทอนที่เราเขียน เราสามารถแสดงผลให้เห็นได้โดย Refresh หน้าเว็บครับ

หน้าเว็บที่แสดงผล

ตัวอย่างการใช้งาน Streamlit

ในภาพในหัวข้อก่อนหน้าจอแสดงเขียนโค้ดด้านบนเป็นตัวอย่างการใช้งานครับ แต่ตัว Streamlit เองก็ไม่ได้มีแค่คำสั่ง write เพียงอย่างเดียว เราสามารถแสดงหัวข้อ/ข้อความโดยเขียนโค้ดให้ง่ายกว่าการเขียนแบบ Markdown แบบข้างบนได้โดยพิมพ์ตามด้านล่าง

ปรับโค้ดนิดหน่อย แทนที่การใช้ Markdown

พิมพ์เสร็จก็พิมพ์คำสั่งให้เริ่มต้นการทำงานเหมือนเดิม จะแสดงผลหน้าจอคล้าย ๆ เดิมครับผม

สำหรับคนที่อยากแสดงภาพ ก็เราสามารถแสดงภาพจาก URL หรือไฟล์ภาพที่อยู่ในรูปอาเรย์ของ numpy หรือไฟล์ภาพจาก PIL ได้เลย โดยพิมพ์คำสั่ง

เขียนโค้ดเพื่อแสดงภาพจาก URL, numpy array หรือไฟล์ภาพจาก PIL (เว็บนั้นมีปัญหาการแสดงภาษาไทย)

หรือใครอยากแบ่งหน้าจอออกแบบ column ทำได้โดยพิมพ์คำสั่ง

แสดงผลออกมาเป็น column

สำหรับคำสั่งอื่น ๆ นอกเหนือจากนี้ ผู้อ่านสามารถศึกษาได้ในเว็บของ Streamlit เองอยู่แล้ว ซึ่งเว็บนี้เองแสดงตัวอย่างของการนำ Streamlit ไปใช้งานเกี่ยวกับ Data ทั้งหลายแหล่ รวมถึงงานด้าน MI/AL ที่ทำกันอยู่อีกด้วย หรือใครที่เขียนโค้ดโดยใช้ไลบรารีอยู่แล้วดันลืมไปชั่วขณะ เราสามารถเข้าไปดูสรุปคำสั่งที่มีใน Streamlit ได้จากหน้าเว็บ Cheatsheet หน้านี้ครับ

โดยสรุปแล้ว

ไลบรารี Streamlit ไลบรารีนี้ เป็นไลบรารีที่ทำให้เราซึ่งเขียนโปรแกรมด้วยภาษาไพทอนอยู่แล้ว สามารถสร้างหน้าเว็บเพื่อแสดงผลตามที่เราต้องการได้โดยไม่จำเป็นต้องมีความรู้ภาษา HTML, CSS และ JavaScript ครับ ฟังแล้วน่าใช้มาก เพราะตอนนี้เราเอาไลบรารีนี้ไปทำงานราษฏร์ งานหลวงทำให้สร้างหน้าเว็บเพื่อดึงไฟล์ภาพออกมาแสดงผลได้ง่ายกว่าเดิมที่โค้ดบางส่วนเขียนด้วย React ครับ

ใครสนใจก็ไปเปิดได้ในหน้าเว็บของผู้ผลิตตามลิ้งค์ข้างบนได้ครับ

By Kittisak Chotikkakamthorn

อดีตนักศึกษาฝึกงานทางด้าน AI ที่ภาควิชาวิศวกรรมไฟฟ้า มหาวิทยาลัย National Chung Cheng ที่ไต้หวัน ที่กำลังหางานทางด้าน Data Engineer ที่มีความสนใจทางด้าน Data, Coding และ Blogging / ติดต่อได้ที่: contact [at] nickuntitled.com