improve fastapi example

Author: samuelcolvin

fastapi-example/main.py

@@ -21,24 +21,26 @@ async def lifespan(_app: FastAPI):
     global http_client, openai_client
     async with AsyncClient() as _http_client:
         http_client = _http_client
-        logfire.instrument_httpx(http_client, headers=True)
+        logfire.instrument_httpx(http_client, capture_headers=True)
         yield
 
 
 app = FastAPI(lifespan=lifespan)
+logfire.instrument_fastapi(app, capture_headers=True)
 this_dir = Path(__file__).parent
 image_dir = Path(__file__).parent / 'images'
 image_dir.mkdir(exist_ok=True)
 app.mount('/static', StaticFiles(directory=image_dir), name='static')
 
 
 @app.get('/')
+@app.get('/display/{image:path}')
 async def main() -> FileResponse:
-    return FileResponse(this_dir / 'index.html')
+    return FileResponse(this_dir / 'page.html')
 
 
 class GenerateResponse(BaseModel):
-    image_url: str = Field(serialization_alias='imageUrl')
+    next_url: str = Field(serialization_alias='nextUrl')
 
 
 @app.post('/generate')
@@ -53,10 +55,10 @@ async def generate_image(prompt: str) -> GenerateResponse:
     r.raise_for_status()
     path = f'{uuid4().hex}.jpg'
     (image_dir / path).write_bytes(r.content)
-    return GenerateResponse(image_url=f'/static/{path}')
+    return GenerateResponse(next_url=f'/display/{path}')
 
 
 if __name__ == '__main__':
     import uvicorn
 
-    uvicorn.run(app, port=8000)
+    uvicorn.run(app)

fastapi-example/index.html renamed to fastapi-example/page.html

@@ -13,7 +13,7 @@
         font-family: "IBM Plex Sans", sans-serif;
         max-width: 800px;
         margin: 0 auto;
-        padding: 80px 20px 20px;
+        padding: 50px 20px 20px;
         background-color: #f5f5f5;
       }
 
@@ -34,6 +34,7 @@
         width: 100%;
         padding: 10px;
         font-size: 16px;
+        font-family: inherit;
         border: 2px solid #ddd;
         border-radius: 8px;
         box-sizing: border-box;
@@ -45,11 +46,17 @@
         border-color: #4caf50;
       }
 
+      a {
+        text-decoration: none;
+      }
+
+      a,
       button {
         background-color: #4caf50;
         color: white;
         padding: 15px 30px;
         font-size: 16px;
+        font-family: inherit;
         border: none;
         border-radius: 8px;
         cursor: pointer;
@@ -84,6 +91,7 @@
 
       .generated-image {
         max-width: 100%;
+        max-height: 600px;
         height: auto;
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -134,7 +142,7 @@ <h1>Image Generator</h1>
           alt="Generated image"
         />
         <br /><br />
-        <button class="clear-btn" onclick="clearImage()">Clear</button>
+        <a href="/" class="clear-btn" onclick="clearImage()">Clear</a>
       </div>
     </div>
 
@@ -176,9 +184,9 @@ <h1>Image Generator</h1>
             throw new Error(`HTTP error! status: ${response.status}`);
           }
 
-          const { imageUrl } = await response.json();
+          const { nextUrl } = await response.json();
 
-          showImage(imageUrl);
+          window.location.href = nextUrl;
         } catch (error) {
           console.error("Error generating image:", error);
           showError("Failed to generate image. Please try again.");
@@ -207,15 +215,13 @@ <h1>Image Generator</h1>
         promptSection.classList.remove("hidden");
       }
 
-      function clearImage() {
-        imageSection.classList.add("hidden");
-        errorSection.classList.add("hidden");
-        promptSection.classList.remove("hidden");
-        promptInput.value = "";
-        promptInput.focus();
+      const path = window.location.pathname;
+      const imageMatch = path.match(/^\/display\/(.+\.jpg)$/);
 
-        // Clean up the blob URL
-        URL.revokeObjectURL(generatedImage.src);
+      if (imageMatch) {
+        const imageUrl = `/static/${imageMatch[1]}`;
+        showLoading();
+        showImage(imageUrl);
       }
     </script>
   </body>