File size: 2,669 Bytes
7161ebe
 
 
 
9179cf3
1a1b3a8
9179cf3
 
4e4e893
1a1b3a8
4e4e893
 
d7b5b8e
4e4e893
 
3dfd27d
d87aa79
dc8a913
9179cf3
7161ebe
 
 
 
 
 
 
 
 
3a574e2
7161ebe
1a1b3a8
7161ebe
 
b0228a2
7161ebe
 
0fcfd7e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a94f470
0fcfd7e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af2239a
0fcfd7e
af2239a
 
 
 
 
 
 
 
 
 
 
 
 
7161ebe
4e4e893
ede4b3b
 
1a1b3a8
7161ebe
 
1a1b3a8
 
 
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
from fastapi import FastAPI
from pydantic import BaseModel
import gradio as gr
import uvicorn
from fastapi.middleware.cors import CORSMiddleware
import threading

app = FastAPI()

# Erlaube alle Ursprünge
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],

)

class Item(BaseModel):
    prompt: str
    zeitstempel: int

@app.post("/items/")
async def create_item(item: Item):
    global prompt
    prompt = item.prompt
    zeitstempel = item.zeitstempel
    return {"prompt": prompt}

# Initialer Wert für prompt
prompt = ""

def get_prompt(prompt):
    return prompt


def show_html():
    return """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textfeld mit FastAPI</title>
</head>
<body>
    <h1>Textfeld mit FastAPI</h1>
    <form id="myForm">
        <label for="prompt">Prompt:</label>
        <input type="text" id="prompt" name="prompt">
        <button type="button" onclick="sendData()">Senden</button>
    </form>

    <script>
        async function sendData() {
            const prompt = document.getElementById("prompt").value;
            const zeitstempel = Math.floor(Date.now() / 1000); // Unix-Zeitstempel
            const data = {
                prompt: prompt,
                zeitstempel: zeitstempel
            };
            const response = await fetch("https://mgokg-fastapi.hf.space:8000/items", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data)
            });
            const result = await response.json();
            alert(result)
            console.log(result)
        }
    </script>
</body>
</html>
"""

with gr.Blocks() as demo:
    gr.HTML(show_html)
    with gr.Row():
        #details_output = gr.DataFrame(label="Ausgabe", elem_id="md")        
        details_output = gr.Textbox(label="Ausgabe")  
    with gr.Row():
        ort_input = gr.Textbox(label="", placeholder="ask anything...")      
    with gr.Row():         
        button = gr.Button("Senden")    

    # Connect the button to the function
    button.click(fn=get_prompt, inputs=ort_input, outputs=details_output)   

# Launch the Gradio application
demo.launch()


@app.get("/")
def read_root():
    return {"message": "Willkommen am Root-Endpunkt."}

if __name__ == "__main__":
    # Starte Gradio in einem separaten Thread
    threading.Thread(target=start_gradio).start()
    uvicorn.run(app, host="0.0.0.0", port=8000)