File size: 3,844 Bytes
c37e02d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
from fastapi import FastAPI, UploadFile, File
from fastapi.responses import HTMLResponse
from PIL import Image
import io
import torch
from transformers import BlipProcessor, BlipForConditionalGeneration

app = FastAPI()

# Load BLIP model & processor
processor = BlipProcessor.from_pretrained("Salesforce/blip-image-captioning-base")
model = BlipForConditionalGeneration.from_pretrained("Salesforce/blip-image-captioning-base")

@app.get("/", response_class=HTMLResponse)
async def main():
    return """
    <html>
    <head>
        <title>Smart Image Captioning</title>
        <style>
            body {
                font-family: 'Segoe UI', sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                background-color: #f3f4f6;
                margin: 0;
            }
            h2 {
                color: #111827;
                margin-bottom: 1rem;
            }
            form {
                background: white;
                padding: 2rem;
                border-radius: 12px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            }
            input[type="file"] {
                margin-bottom: 1rem;
            }
            input[type="submit"] {
                padding: 0.5rem 1.2rem;
                font-size: 1rem;
                background-color: #2563eb;
                color: white;
                border: none;
                border-radius: 6px;
                cursor: pointer;
            }
            input[type="submit"]:hover {
                background-color: #1d4ed8;
            }
        </style>
    </head>
    <body>
        <h2>🧠 Smart Image Captioning</h2>
        <form action="/caption" enctype="multipart/form-data" method="post">
            <input name="file" type="file" accept="image/*" required><br>
            <input type="submit" value="Generate Caption">
        </form>
    </body>
    </html>
    """

@app.post("/caption", response_class=HTMLResponse)
async def caption(file: UploadFile = File(...)):
    contents = await file.read()
    image = Image.open(io.BytesIO(contents)).convert('RGB')

    # Generate caption
    inputs = processor(images=image, return_tensors="pt")
    out = model.generate(**inputs)
    caption = processor.decode(out[0], skip_special_tokens=True)

    return f"""
    <html>
    <head>
        <title>Caption Result</title>
        <style>
            body {{
                font-family: 'Segoe UI', sans-serif;
                background-color: #f9fafb;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                padding: 2rem;
            }}
            .box {{
                background: white;
                padding: 2rem;
                border-radius: 12px;
                box-shadow: 0 8px 20px rgba(0,0,0,0.1);
                text-align: center;
            }}
            .caption {{
                font-size: 1.25rem;
                color: #1f2937;
                margin-top: 1rem;
            }}
            a {{
                display: inline-block;
                margin-top: 1.5rem;
                color: #2563eb;
                text-decoration: none;
                font-weight: bold;
            }}
            a:hover {{
                text-decoration: underline;
            }}
        </style>
    </head>
    <body>
        <div class="box">
            <h2>🖼️ Image Caption Result</h2>
            <p><b>File:</b> {file.filename}</p>
            <p class="caption"><b>Caption:</b> {caption}</p>
            <a href="/">🔁 Try another image</a>
        </div>
    </body>
    </html>
    """