File size: 4,541 Bytes
8800810
 
 
 
c0d0d43
 
8800810
 
 
c0d0d43
8800810
 
 
 
 
 
 
 
 
 
 
c0d0d43
 
 
 
8800810
 
c0d0d43
8800810
 
 
 
 
c0d0d43
 
 
8800810
c0d0d43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8800810
c0d0d43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8800810
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import os
import datetime
from pydantic import BaseModel
import uvicorn
from fastapi.middleware.cors import CORSMiddleware

# Create FastAPI app
app = FastAPI(title="FastAPI Web App")

# Add CORS middleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Ensure templates directory exists
os.makedirs('templates', exist_ok=True)

# Set up templates
templates = Jinja2Templates(directory="templates")

# Create a simple HTML template if it doesn't exist
if not os.path.exists('templates/index.html'):
    os.makedirs('templates', exist_ok=True)
    with open('templates/index.html', 'w') as f:
        f.write('''
<!DOCTYPE html>
<html>
<head>
    <title>FastAPI Web App on Hugging Face Spaces</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-top: 20px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>Welcome to FastAPI Web App on Hugging Face Spaces</h1>
    <p>The current server time is: {{ current_time }}</p>
    
    <div class="container">
        <h2>API Demo</h2>
        <button id="getTimeBtn">Get Current Time</button>
        <button id="sendEchoBtn">Send Echo Request</button>
        <div id="result">
            <pre id="output">Results will appear here...</pre>
        </div>
    </div>

    <script>
        document.getElementById('getTimeBtn').addEventListener('click', async () => {
            try {
                const response = await fetch('/api/time');
                const data = await response.json();
                document.getElementById('output').textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                document.getElementById('output').textContent = 'Error: ' + error.message;
            }
        });

        document.getElementById('sendEchoBtn').addEventListener('click', async () => {
            try {
                const testData = {
                    message: "Hello from the client!",
                    timestamp: new Date().toISOString()
                };
                
                const response = await fetch('/api/echo', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(testData)
                });
                
                const data = await response.json();
                document.getElementById('output').textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                document.getElementById('output').textContent = 'Error: ' + error.message;
            }
        });
    </script>
</body>
</html>
        ''')

@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
    """Render the home page."""
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return templates.TemplateResponse("index.html", {"request": request, "current_time": current_time})

@app.get("/api/time")
async def get_time():
    """API endpoint that returns the current time."""
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return {"time": current_time}

class EchoRequest(BaseModel):
    """Model for the echo request body."""
    message: str = None
    timestamp: str = None

@app.post("/api/echo")
async def echo(data: EchoRequest):
    """API endpoint that echoes back the JSON data sent to it."""
    return {"status": "success", "echo": data.dict()}

# For local development
if __name__ == '__main__':
    uvicorn.run("app:app", host="0.0.0.0", port=7860, reload=True)