File size: 4,988 Bytes
e98915a
 
 
 
 
c66450a
e98915a
72bab89
c66450a
 
 
 
 
72bab89
c66450a
72bab89
c66450a
72bab89
c66450a
 
 
 
72bab89
c66450a
 
 
 
 
 
72bab89
c66450a
78cf9bd
c66450a
 
 
 
 
 
 
 
 
72bab89
c66450a
 
78cf9bd
c66450a
08e09ca
c66450a
 
08e09ca
c66450a
 
 
 
 
 
08e09ca
72bab89
 
 
c66450a
 
60738dd
c66450a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78cf9bd
72bab89
c66450a
 
 
 
ee44384
c66450a
08e09ca
78cf9bd
c66450a
55adf2c
78cf9bd
55adf2c
78cf9bd
c66450a
 
 
 
55adf2c
c66450a
55adf2c
c66450a
55adf2c
c66450a
e98915a
 
78cf9bd
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Web Application</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #444;
        }
        h2 {
            color: #555;
            border-bottom: 2px solid #ddd;
            padding-bottom: 5px;
        }
        form {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        input[type="file"], textarea, input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background: #e9ecef;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>AI Web Application</h1>

    <!-- Summarizationnnnnnnnnnnnnnnnn->
    <h2>Summarization</h2>
    <form id="summarizeForm">
        <input type="file" name="file" accept=".pdf,.docx">
        <textarea name="text" placeholder="Or enter text manually"></textarea>
        <button type="button" onclick="submitForm('/summarize', 'summarizeForm', 'summarizeResult')">Summarize</button>
    </form>
    <div id="summarizeResult" class="result"></div>

    <!-- Image Captioning -->
    <h2>Image Captioning</h2>
    <form id="captionForm">
        <input type="file" name="file" accept="image/*">
        <button type="button" onclick="submitForm('/caption', 'captionForm', 'captionResult')">Generate Caption</button>
    </form>
    <div id="captionResult" class="result"></div>

    <!-- Question Answering -->
    <h2>Question Answering</h2>
    <form id="answerForm">
        <input type="file" name="file" accept=".pdf,.docx">
        <textarea name="text" placeholder="Or enter text manually"></textarea>
        <input type="text" name="question" placeholder="Enter your question">
        <button type="button" onclick="submitForm('/answer', 'answerForm', 'answerResult')">Answer</button>
    </form>
    <div id="answerResult" class="result"></div>

    <!-- Visual Question Answering -->
    <h2>Visual Question Answering</h2>
    <form id="vqaForm">
        <input type="file" name="file" accept="image/*">
        <input type="text" name="question" placeholder="Enter your question">
        <button type="button" onclick="submitForm('/vqa', 'vqaForm', 'vqaResult')">Answer</button>
    </form>
    <div id="vqaResult" class="result"></div>

    <!-- Data Visualization -->
    <h2>Data Visualization</h2>
    <form id="visualizeForm">
        <input type="file" name="file" accept=".xlsx,.xls">
        <input type="text" name="request" placeholder="Enter visualization request (e.g., bar, line)">
        <button type="button" onclick="submitForm('/visualize', 'visualizeForm', 'visualizeResult')">Generate Code</button>
    </form>
    <div id="visualizeResult" class="result"></div>

    <!-- Document Translation -->
    <h2>Document Translation</h2>
    <form id="translateForm">
        <input type="file" name="file" accept=".pdf,.docx">
        <input type="text" name="target_language" placeholder="Enter target language (e.g., fr, es)">
        <button type="button" onclick="submitForm('/translate', 'translateForm', 'translateResult')">Translate</button>
    </form>
    <div id="translateResult" class="result"></div>

    <script>
        async function submitForm(endpoint, formId, resultId) {
            const form = document.getElementById(formId);
            const formData = new FormData(form);
            const resultDiv = document.getElementById(resultId);

            resultDiv.innerHTML = "Processing...";

            try {
                const response = await fetch(endpoint, {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                const data = await response.json();
                resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
            } catch (error) {
                resultDiv.innerHTML = `Error: ${error.message}`;
            }
        }
    </script>
</body>
</html>