Hugging Face's logo

Spaces:
cm107
/
test_flask_space
Paused

App Files Community
cm107 commited on
Commit
f418104
·
1 Parent(s): 2e01b75

initial commit

Browse files
Files changed (11) hide show
  1. .gitignore +3 -0
  2. app.py +36 -0
  3. packages.txt +3 -0
  4. requirements.txt +6 -0
  5. static/css/evaluate.css +13 -0
  6. static/css/main.css +51 -0
  7. static/js/test_page.js +37 -0
  8. templates/about.html +27 -0
  9. templates/evaluate-expression.html +24 -0
  10. templates/index.html +68 -0
  11. templates/user-name.html +26 -0
.gitignore ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ __pycache__
2
+ *.pyc
3
+ venv
app.py ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import flask
2
+ import os
3
+ # from dotenv import load_dotenv
4
+ # load_dotenv()
5
+
6
+ app = flask.Flask(__name__, template_folder="./templates/")
7
+
8
+
9
+ @app.route('/')
10
+ def index():
11
+ print('Route: /')
12
+ return flask.render_template('index.html')
13
+
14
+ @app.route('/about')
15
+ def about():
16
+ print('Route: /about')
17
+ return flask.render_template('about.html')
18
+
19
+ @app.route('/user/<name>')
20
+ def user(name: str):
21
+ print(f'Route: /user/{name}')
22
+ return flask.render_template('user-name.html', name=name)
23
+
24
+ @app.route('/evaluate/<expression>')
25
+ def evaluate(expression: str):
26
+ print(f'Route: /eval/{expression}')
27
+
28
+ # You can do some processing here before rendering the template.
29
+ result = eval(expression)
30
+ print(f"\tResult: {result}")
31
+
32
+ return flask.render_template('evaluate-expression.html', expression=expression, result=result)
33
+
34
+
35
+ if __name__ == '__main__':
36
+ app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 7860)))
packages.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ ffmpeg
2
+ libsm6
3
+ libxext6
requirements.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ click==8.1.3
2
+ Flask==2.2.2
3
+ itsdangerous==2.1.2
4
+ Jinja2==3.1.2
5
+ MarkupSafe==2.1.1
6
+ Werkzeug==2.2.2
static/css/evaluate.css ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ h1 {
2
+ font-size: 32px;
3
+ margin-top: 0;
4
+ }
5
+
6
+ .eval_result {
7
+ font-size: 20px;
8
+ color: purple;
9
+ display: flex;
10
+ justify-content: center;
11
+ margin-top: 20px;
12
+ margin-bottom: 20px;
13
+ }
static/css/main.css ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }
29
+
30
+ .test_button {
31
+ color: yellow;
32
+ background-color: rgb(9, 96, 158);
33
+ border-color: rgb(89, 50, 195);
34
+ border-width: 5px;
35
+ }
36
+
37
+ .test_button_text {
38
+ color: red;
39
+ display: inline-block;
40
+ background-color: black;
41
+ /* width: fit-content; */
42
+ margin-left: 3px;
43
+ padding-left: 3px;
44
+ padding-right: 3px;
45
+ padding-top: 3px;
46
+ padding-bottom: 3px;
47
+ }
48
+
49
+ .test_button_text_empty {
50
+ display: inline-block;
51
+ }
static/js/test_page.js ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class ButtonTextPair {
2
+ constructor(btnId, btnTextId, clickMsg = 'Well, this was a nice test!') {
3
+ this.btnId = btnId;
4
+ this.btnTextId = btnTextId;
5
+ this.clickMsg = clickMsg;
6
+
7
+ this.initBtn();
8
+ }
9
+
10
+ get btn() {
11
+ return document.getElementById(this.btnId);
12
+ }
13
+
14
+ get btnText() {
15
+ return document.getElementById(this.btnTextId);
16
+ }
17
+
18
+ initBtn() {
19
+ this.clearMsg();
20
+ this.btn.addEventListener('mousedown', e => this.writeMsg());
21
+ this.btn.addEventListener('mouseup', e => this.clearMsg());
22
+ this.btn.addEventListener('mouseout', e => this.clearMsg());
23
+ }
24
+
25
+ clearMsg() {
26
+ this.btnText.className = 'test_button_text_empty';
27
+ this.btnText.innerHTML = '';
28
+ }
29
+
30
+ writeMsg() {
31
+ this.btnText.className = 'test_button_text';
32
+ this.btnText.innerHTML = this.clickMsg;
33
+ }
34
+ }
35
+
36
+ var pair1 = new ButtonTextPair('btn1', 'btn1_text', 'Well, this was a nice test.');
37
+ var pair1 = new ButtonTextPair('btn2', 'btn2_text', 'This is fun.');
templates/about.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>About</title>
8
+ <link rel="stylesheet" href="../static/css/main.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <h1>About</h1>
13
+ <p>
14
+ This is just a simple test for creating a space on huggingface that
15
+ works with <a href="https://flask.palletsprojects.com/en/2.2.x/">Flask</a>.
16
+ </p>
17
+ <p>
18
+ This isn't much to write here yet.
19
+ </p>
20
+
21
+ <h1>Navigation</h1>
22
+ <li>
23
+ <a href="..">Home</a>
24
+ </li>
25
+ </body>
26
+
27
+ </html>
templates/evaluate-expression.html ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>Eval: {{ expression }}</title>
8
+ <link rel="stylesheet" href="../static/css/main.css" />
9
+ <link rel="stylesheet" href="../static/css/evaluate.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <h1>Evaluate {{ expression }}</h1>
14
+ <div class="eval_result">
15
+ {{ expression }} = {{ result }}
16
+ </div>
17
+
18
+ <h1>Navigation</h1>
19
+ <li>
20
+ <a href="../..">Home</a>
21
+ </li>
22
+ </body>
23
+
24
+ </html>
templates/index.html ADDED
@@ -0,0 +1,68 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>My Flask Space</title>
8
+ <link rel="stylesheet" href="../static/css/main.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <div class="card">
13
+ <h1>Welcome to your static Space!</h1>
14
+ <p>
15
+ You can modify this app directly by editing <i>index.html</i> in the
16
+ Files and versions tab.
17
+ </p>
18
+ <p>
19
+ Also don't forget to check the
20
+ <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
21
+ </p>
22
+ </div>
23
+ <h1>Test Page</h1>
24
+ <button id="btn1" class="test_button">Click Me</button>
25
+ <div id="btn1_text" class="test_button_text_empty"></div>
26
+ <br>
27
+ <button id="btn2" class="test_button">Click Me Too!</button>
28
+ <div id="btn2_text" class="test_button_text_empty"></div>
29
+
30
+ <h1>Navigation</h1>
31
+ <ul>
32
+ <li>
33
+ <a href="about">About</a>
34
+ </li>
35
+ <li>
36
+ User Examples:
37
+ <ul>
38
+ <li>
39
+ <a href="/user/Bob">Bob</a>
40
+ </li>
41
+ <li>
42
+ <a href="/user/Jerry">Jerry</a>
43
+ </li>
44
+ <li>
45
+ <a href="/user/Tom">Tom</a>
46
+ </li>
47
+ </ul>
48
+ </li>
49
+ <li class>
50
+ Evaluate Examples:
51
+ <ul>
52
+ <li>
53
+ <a href="/evaluate/1+1">1+1</a>
54
+ </li>
55
+ <li>
56
+ <a href="/evaluate/(3**2 + 4**2)**0.5">(3**2 + 4**2)**0.5</a>
57
+ </li>
58
+ <li>
59
+ <a href="/evaluate/sum([1,2,3,4,5,6,7,8,9])">sum([1,2,3,4,5,6,7,8,9])</a>
60
+ </li>
61
+ </ul>
62
+ </li>
63
+ </ul>
64
+
65
+ <script type="text/javascript" src="../static/js/test_page.js"></script>
66
+ </body>
67
+
68
+ </html>
templates/user-name.html ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>User: {{ name }}</title>
8
+ <link rel="stylesheet" href="../static/css/main.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <h1>Welcome {{ name }}!</h1>
13
+ <p>
14
+ We can pass variables to the HTML page like this.
15
+ </p>
16
+ <p>
17
+ You passed name={{ name }}
18
+ </p>
19
+
20
+ <h1>Navigation</h1>
21
+ <li>
22
+ <a href="../..">Home</a>
23
+ </li>
24
+ </body>
25
+
26
+ </html>