feat: add cache view page with media display

- /ui/cache/{hash} shows image/video inline
- File details: hash, type, size
- Download button
- All cache links now go to view page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
gilesb
2026-01-07 14:23:42 +00:00
parent 30050f7a65
commit 62891f57fe

View File

@@ -299,6 +299,91 @@ async def get_cached(content_hash: str):
return FileResponse(cache_path)
@app.get("/ui/cache/{content_hash}", response_class=HTMLResponse)
async def ui_cache_view(content_hash: str):
"""View cached content with appropriate display."""
cache_path = CACHE_DIR / content_hash
if not cache_path.exists():
return HTMLResponse(f"""
<!DOCTYPE html>
<html>
<head><title>Not Found | Art DAG L1</title><style>{UI_CSS}</style></head>
<body>
<h1><a href="/ui" style="color: inherit;">Art DAG L1 Server</a></h1>
<a href="/ui" class="back-btn">&larr; Back to runs</a>
<div class="run"><p>Content not found: {content_hash}</p></div>
</body>
</html>
""", status_code=404)
media_type = detect_media_type(cache_path)
file_size = cache_path.stat().st_size
size_str = f"{file_size:,} bytes"
if file_size > 1024*1024:
size_str = f"{file_size/(1024*1024):.1f} MB"
elif file_size > 1024:
size_str = f"{file_size/1024:.1f} KB"
html = f"""
<!DOCTYPE html>
<html>
<head>
<title>{content_hash[:16]}... | Art DAG L1</title>
<style>{UI_CSS}</style>
</head>
<body>
<h1><a href="/ui" style="color: inherit;">Art DAG L1 Server</a></h1>
<a href="/ui" class="back-btn">&larr; Back to runs</a>
<div class="run">
<div class="run-header">
<div>
<span class="run-recipe">{media_type.capitalize()}</span>
<span class="run-id">{content_hash[:32]}...</span>
</div>
<a href="/cache/{content_hash}" download class="status completed" style="text-decoration:none;">Download</a>
</div>
<div class="media-container" style="margin: 20px 0;">
"""
if media_type == "video":
html += f'<video src="/cache/{content_hash}" controls autoplay muted loop style="max-width:100%;max-height:500px;"></video>'
elif media_type == "image":
html += f'<img src="/cache/{content_hash}" alt="{content_hash}" style="max-width:100%;max-height:500px;">'
else:
html += f'<p>Unknown file type. <a href="/cache/{content_hash}" download>Download file</a></p>'
html += f"""
</div>
<div class="provenance">
<h2>Details</h2>
<div class="prov-item">
<div class="prov-label">Content Hash (SHA3-256)</div>
<div class="prov-value">{content_hash}</div>
</div>
<div class="prov-item">
<div class="prov-label">Type</div>
<div class="prov-value">{media_type}</div>
</div>
<div class="prov-item">
<div class="prov-label">Size</div>
<div class="prov-value">{size_str}</div>
</div>
<div class="prov-item">
<div class="prov-label">Raw URL</div>
<div class="prov-value"><a href="/cache/{content_hash}">/cache/{content_hash}</a></div>
</div>
</div>
</div>
</body>
</html>
"""
return html
@app.get("/cache")
async def list_cache():
"""List cached content hashes."""
@@ -600,7 +685,7 @@ async def ui_detail_page(run_id: str):
input_media_type = detect_media_type(CACHE_DIR / input_hash)
html += f'''
<div class="media-box">
<label>Input: <a href="/cache/{input_hash}">{input_hash[:24]}...</a></label>
<label>Input: <a href="/ui/cache/{input_hash}">{input_hash[:24]}...</a></label>
<div class="media-container">
'''
if input_media_type == "video":
@@ -614,7 +699,7 @@ async def ui_detail_page(run_id: str):
output_media_type = detect_media_type(CACHE_DIR / output_hash)
html += f'''
<div class="media-box">
<label>Output: <a href="/cache/{output_hash}">{output_hash[:24]}...</a></label>
<label>Output: <a href="/ui/cache/{output_hash}">{output_hash[:24]}...</a></label>
<div class="media-container">
'''
if output_media_type == "video":
@@ -638,7 +723,7 @@ async def ui_detail_page(run_id: str):
<div class="prov-value">
'''
for inp in run.inputs:
html += f'<a href="/cache/{inp}">{inp}</a><br>'
html += f'<a href="/ui/cache/{inp}">{inp}</a><br>'
html += f'''
</div>
</div>
@@ -648,7 +733,7 @@ async def ui_detail_page(run_id: str):
html += f'''
<div class="prov-item">
<div class="prov-label">Output</div>
<div class="prov-value"><a href="/cache/{run.output_hash}">{run.output_hash}</a></div>
<div class="prov-value"><a href="/ui/cache/{run.output_hash}">{run.output_hash}</a></div>
</div>
'''
@@ -739,7 +824,7 @@ async def ui_run_partial(run_id: str):
if has_input:
input_hash = run.inputs[0]
input_media_type = detect_media_type(CACHE_DIR / input_hash)
html += f'<div class="media-box"><label>Input: {input_hash[:24]}...</label><div class="media-container">'
html += f'<div class="media-box"><label>Input: <a href="/ui/cache/{input_hash}">{input_hash[:24]}...</a></label><div class="media-container">'
if input_media_type == "video":
html += f'<video src="/cache/{input_hash}" controls muted loop></video>'
elif input_media_type == "image":
@@ -749,7 +834,7 @@ async def ui_run_partial(run_id: str):
if has_output:
output_hash = run.output_hash
output_media_type = detect_media_type(CACHE_DIR / output_hash)
html += f'<div class="media-box"><label>Output: {output_hash[:24]}...</label><div class="media-container">'
html += f'<div class="media-box"><label>Output: <a href="/ui/cache/{output_hash}">{output_hash[:24]}...</a></label><div class="media-container">'
if output_media_type == "video":
html += f'<video src="/cache/{output_hash}" controls autoplay muted loop></video>'
elif output_media_type == "image":