benny/Buffteks-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create code editor and run code with subprocess package

Browse Source
This commit is contained in:
BuffTechTalk
2024-09-06 22:22:45 -05:00
parent f510856c42
commit 23fd3ab74e
38 changed files with 406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
__pycache__/code_editor.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
__pycache__/navigation.cpython-312.pyc Normal file
View File

Binary file not shown.

35
app.py Normal file
View File

@@ -0,0 +1,35 @@
import streamlit as st
import webpages as pg
from webpages.navigation import navigation_bar as nv
page_label = nv()
# block for main pages
if page_label == "Homepage":
pg.home()
elif page_label == "BuffTeks Project":
pg.project()
elif page_label == "About Classroom":
pg.classroom()
elif page_label == "BuffTeks Event":
pg.event()
elif page_label == "Join Us":
pg.join_us()
# block of PythonX lessons
elif page_label == "About PythonX":
pg.pythonx_homepage()
elif page_label == "Lesson1":
pg.pythonx_lesson1()
elif page_label == "Lesson2":
pg.pythonx_lesson2()
# block for testing page
elif page_label == "Testing":
pg.testing()
elif page_label == "Reference":
pg.reference()

BIN
images/AboutCoding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/BuffTeksLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

BIN
images/CodingProcess.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/PythonXPicture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 747 KiB

11
webpages/__init__.py Normal file
View File

@@ -0,0 +1,11 @@
from .home import home
from .project import project
from .event import event
from .classroom import classroom
from .join_us import join_us
from .testing import testing
from .reference import reference
from .pythonx_lessons_pages.pythonx_homepage import pythonx_homepage
from .pythonx_lessons_pages.pythonx_lesson1 import pythonx_lesson1
from .pythonx_lessons_pages.pythonx_lesson2 import pythonx_lesson2
from .pythonx_lessons_pages.pythonx_lesson3 import pythonx_lesson3

BIN
webpages/__pycache__/__init__.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/classroom.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/code_editor.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/event.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/home.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/join_us.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/navigation.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/project.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/reference.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/__pycache__/testing.cpython-312.pyc Normal file
View File

Binary file not shown.

145
webpages/buffteks.html Normal file
View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BuffTeks - Student Tech Club</title>
<style>
body {
font-family: Consolas, monospace;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
text-align: center;
padding: 1rem 0;
margin-bottom: 1rem;
}
.header-content {
background-color: #ffffff;
color: #450012;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
h1, h2 {
font-family: 'Arial Black', Gadget, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto 2rem;
padding: 1rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 10px 0;
}
.faculty {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.faculty img {
height: 300px;
width: 200px;
margin-right: 1rem;
}
.faculty-info {
flex: 1;
}
.join {
text-align: center;
margin-top: 2rem;
}
.join a {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.join a:hover {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>BuffTeks Student Organization</h1>
<div class="header-content">
<p>Building Skills, Crafting Code, Bridging Communities</p>
</div>
</header>
<div class="container">
<section>
<h2>Our Mission</h2>
<p>Empower members with advanced software development knowledge, foster new skills and technologies in a collaborative and engaging community.</p>
</section>
<section>
<h2>Our Activities</h2>
<ul>
<li><strong>BuffTeks Event:</strong> Host competitions and hackathons that empower students to use classroom knowledge for real-world solutions.</li>
<li><strong>BuffTeks Project:</strong> Faculty-led coding projects to provide IT solutions and support to problems facing local companies as part of an experiential learning effort.</li>
<li><strong>BuffTeks Classroom:</strong> An open learning platform devoted to sharing knowledge of information technology including Python programming and web application development.</li>
</ul>
</section>
<section>
<h2>Faculty Advisors</h2>
<div class="faculty">
<img src="https://www.wtamu.edu/_files/images/academics/college-business/headshots/zhang-carl-22.png" alt="Dr. Carl Zhang">
<div class="faculty-info">
<strong>Dr. Carl Zhang</strong><br>
CC 208D<br>
<a href="mailto:czhang@wtamu.edu">czhang@wtamu.edu</a>
</div>
</div>
<div class="faculty">
<img src="https://www.wtamu.edu/_files/images/academics/college-business/headshots/babb-jeffry-22.png" alt="Dr. Jeffry Babb">
<div class="faculty-info">
<strong>Dr. Jeffry Babb</strong><br>
CC 214E<br>
<a href="mailto:jbabb@wtamu.edu">jbabb@wtamu.edu</a>
</div>
</div>
</section>
<div class="join">
<h2>Join Us</h2>
<p>Please fill out the form below to register as a BuffTeks member.</p>
<a href="https://wtamuuw.az1.qualtrics.com/jfe/form/SV_2boQtKLCptO33HE" target="_blank">Click Here to Join Us</a>
</div>
</div>
</body>
</html>

7
webpages/classroom.py Normal file
View File

@@ -0,0 +1,7 @@
import streamlit as st
def classroom():
st.title("BuffTeks Classroom")
st.divider()
st.title("PythonX")
st.image("./images/PythonXPicture.png")

52
webpages/code_editor.py Normal file
View File

@@ -0,0 +1,52 @@
# [TBD] Once the code editor works in the texting page, move it here
import streamlit as st
import subprocess
from streamlit_ace import st_ace
def code_editor(height="300px", sample_code = "", editor_label = "",min_lines = 20):
with st.container():
content = st_ace(
height=height,
value= sample_code,
placeholder="Put the code here and click 'APPLY' to run",
language= "python",
theme="github",
font_size= 15,
tab_size=4,
show_gutter=True, # line number
min_lines=min_lines,
key=editor_label, #lable of the code editor
# show_print_margin=c2.checkbox("Show print margin", value=False),
# wrap=c2.checkbox("Wrap enabled", value=False),
# auto_update=c2.checkbox("Auto update", value=False),
# readonly=c2.checkbox("Read-only", value=False),
# keybinding=c2.selectbox("Keybinding mode", options=KEYBINDINGS, index=3),
)
if content:
with open("./webpages/input_code.py", "w") as f:
f.write(content)
try:
result = subprocess.run(
["python", "./webpages/input_code.py"], # Command to execute
capture_output=True, # Capture both stdout and stderr
text=True, # Ensure the output is returned as a string
timeout=10 # Timeout after 10 seconds
)
# Check if the process encountered an error (non-zero exit code)
if result.returncode != 0:
st.error("Error:\t"+ result.stderr) # Print the error details from code.py
else:
st.success("**Code Output:**")
st.text(result.stdout) # Print the normal output if no errors
except subprocess.TimeoutExpired:
# Handle case where the process runs for too long
st.exception("The code took too long to execute and was terminated.")
st.divider()

6
webpages/event.py Normal file
View File

@@ -0,0 +1,6 @@
import streamlit as st
def event():
st.title("BuffTeks Event")

4
webpages/home.py Normal file
View File

@@ -0,0 +1,4 @@
import streamlit as st
def home():
st.html("./webpages/buffteks.html")

1
webpages/input_code.py Normal file
View File

@@ -0,0 +1 @@
print("Hello PythonX")

4
webpages/join_us.py Normal file
View File

@@ -0,0 +1,4 @@
import streamlit as st
def join_us():
st.html("https://wtamuuw.az1.qualtrics.com/jfe/form/SV_2boQtKLCptO33HE")

39
webpages/navigation.py Normal file
View File

@@ -0,0 +1,39 @@
import streamlit as st
import streamlit_antd_components as sac
# This doc is used to set up the navigation bar
# basic structure is:
def navigation_bar():
# start page is the homepage
page_label = "Homepage"
with st.sidebar:
st.image("./images/BuffTeksLogo.png", caption="Building Skills, Crafting Code, Bridging Communities")
page_label = sac.menu([
sac.MenuItem("Testing", icon='fingerprint'),
sac.MenuItem('Homepage', icon='house'),
sac.MenuItem('BuffTeks Project', icon='bi bi-laptop'),
sac.MenuItem('BuffTeks Event', icon='calendar-event'),
sac.MenuItem('BuffTeks Classroom', icon='book', children=[
sac.MenuItem('About Classroom', icon='question-circle'),
sac.MenuItem('PythonX', icon='bi bi-filetype-py', children=[
sac.MenuItem('About PythonX', icon='question-circle'),
sac.MenuItem('Lesson1', icon='1-square'),
sac.MenuItem('Lesson2', icon='2-square'),
sac.MenuItem('Lesson3', icon='3-square'),
]),
]),
sac.MenuItem(type='divider'),
sac.MenuItem('Link', type='group', children=[
sac.MenuItem('Join Us', icon='person-plus', href='https://wtamuuw.az1.qualtrics.com/jfe/form/SV_2boQtKLCptO33HE'),
]),
sac.MenuItem(type='divider'),
sac.MenuItem("Reference", icon='paperclip'),
], open_all=True)
return page_label

4
webpages/project.py Normal file
View File

@@ -0,0 +1,4 @@
import streamlit as st
def project():
st.title("BuffTeks Project")

BIN
webpages/pythonx_lessons_pages/__pycache__/PythonXHomepage.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/pythonx_lessons_pages/__pycache__/pythonx_homepage.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson1.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson2.cpython-312.pyc Normal file
View File

Binary file not shown.

BIN
webpages/pythonx_lessons_pages/__pycache__/pythonx_lesson3.cpython-312.pyc Normal file
View File

Binary file not shown.

31
webpages/pythonx_lessons_pages/pythonx_homepage.py Normal file
View File

@@ -0,0 +1,31 @@
import streamlit as st
def pythonx_homepage():
# load pythonx logo
st.image("./images/PythonXPicture.png")
st.markdown("# :question: What is PythonX")
st.markdown(
""":blush: Computer programming is the art of designing and creating instructions for computers to follow and execute in the form of software programs. It involves using programming languages, algorithms, and data structures to solve problems and accomplish tasks. With the advancement of technology, programming has expanded beyond traditional computer platforms to include smartphones, smartwatches, and even automobiles. It has also become a powerful tool in other fields such as chemistry, biology, finance, and more.
\nIn this tutorial, we aim to introduce the basics of Python programming and demonstrate its utility across various fields. Our goal is not to make you an expert software developer or engineer, but rather to equip you with fundamental Python programming skills that can enhance your work in your chosen field. That's why we've named this tutorial \"PythonX\" where 'X' represents the infinite possibilities and diverse applications in various domains."""
)
st.markdown("# :question: Why Choose Python")
st.markdown(
"""
:snake: [Python](https://www.python.org/) is a high-level, widely-used programming language known for its simplicity and readability. As a general-purpose language, it is versatile enough to create a variety of software, including desktop applications, web and mobile apps, games, as well as for scientific and mathematical computing, data analysis and visualization, machine learning, and more.
:smiley: Python is also considered a **beginner-friendly** language due to its straightforward syntax, making it accessible for new programmers to learn. Furthermore, Python boasts a large and active community that provides a plethora of **libraries, frameworks, and modules**, enabling developers to perform complex tasks with minimal code.
:chart_with_upwards_trend: The language is widely utilized in **scientific and numerical computing, data science, and artificial intelligence**.
:+1: Overall, Python is a **powerful, versatile, and easy-to-learn** programming language, making it one of the most popular languages in use today.
"""
)

30
webpages/pythonx_lessons_pages/pythonx_lesson1.py Normal file
View File

@@ -0,0 +1,30 @@
import streamlit as st
from webpages import code_editor as ce
def pythonx_lesson1():
st.title("Lesson 1: Introduction to Python")
st.markdown("# :one: From Idea to Program")
st.markdown(
"""
The following chat outlines the basic logic of computer programming. We start with a task that we want the computer to help complete.
- **Step 1**: The programmer **analyzes reuqirements** to identify the process to complete the task.
- **Step 2**: The programmer **implements** the identified process in programming code as a computer program.
- **Step 3**: The programmer **deploys** the program on the computer and let the complete complete the task and give expected outcomes.
This is a simplified outline of coding (computer programming), and additional steps may be involved depending on the task's complexity and the program.
""")
st.image("./images/CodingProcess.png")
st.markdown("# :two: First Python Program: Hello PythonX!")
st.markdown("""Now, let's try our first program, which print out "Hello PythonX" on our computer screen with following code:""")
st.code("""print("Hello PythonX)""")
# try sample code of hello pythonX
ce.code_editor(height="150px",editor_label="lesson1-helloworld")

5
webpages/pythonx_lessons_pages/pythonx_lesson2.py Normal file
View File

@@ -0,0 +1,5 @@
import streamlit as st
from webpages import code_editor as ce
def pythonx_lesson2():
st.title("Lesson 2: Create WordClouds in Python")

6
webpages/pythonx_lessons_pages/pythonx_lesson3.py Normal file
View File

@@ -0,0 +1,6 @@
import streamlit as st
from webpages import code_editor as ce
def pythonx_lesson3():
st.title("Lesson 3: Create WordClouds in Python")

14
webpages/reference.py Normal file
View File

@@ -0,0 +1,14 @@
import streamlit as st
def reference():
st.markdown("This page is used to list all references when implementing this online tutorials")
st.markdown("""
- [Emoji for Markdown](https://gist.github.com/rxaviers/7360908)"
- [Streamlit Cheat Sheet](https://cheat-sheet.streamlit.app/)
- [Navigation Bar](https://docs.streamlit.io/develop/api-reference/navigation/st.navigation)
- [Menu Bar](https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/)
- [Bootstrap Icon](https://icons.getbootstrap.com/)
- [Code editor](https://okld-gallery.streamlit.app/)
""")

12
webpages/testing.py Normal file
View File

@@ -0,0 +1,12 @@
import streamlit as st
import subprocess
from webpages import code_editor as ce
def testing():
st.title("Testing Page")
ce.code_editor()
# # [Work]code for instering youtube videos
# video = "https://youtu.be/HluANRwPyNo?feature=shared"
# st.video(video)