Show input content as thumbnails in activity/asset detail

- Display actual images/videos for inputs (not just hash links)
- Video auto-plays if detected, falls back to image
- Consistent display on both activity and asset detail pages

🤖 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 21:52:52 +00:00
parent 0602195ed0
commit 069010660d

View File

@@ -716,14 +716,27 @@ async def ui_activity_detail(activity_index: int, request: Request):
else:
effect_url = f"{EFFECTS_REPO_URL}/src/branch/main/{recipe}"
# Build inputs display
# Build inputs display - show actual content as thumbnails
inputs_html = ""
for inp in inputs:
inp_hash = inp.get("content_hash", "") if isinstance(inp, dict) else inp
if inp_hash:
inputs_html += f'''
<a href="{l1_server}/cache/{inp_hash}" target="_blank"
class="inline-block px-2 py-1 bg-dark-500 rounded text-blue-400 hover:text-blue-300 font-mono text-xs mr-2 mb-2">{inp_hash[:20]}...</a>
<div class="bg-dark-500 rounded-lg p-3 mb-3">
<div class="flex justify-center mb-2">
<video src="{l1_server}/cache/{inp_hash}/mp4"
class="max-h-40 rounded hidden" muted loop playsinline
onloadeddata="this.classList.remove('hidden'); this.nextElementSibling.classList.add('hidden'); this.play();">
</video>
<img src="{l1_server}/cache/{inp_hash}" alt="Input"
class="max-h-40 rounded">
</div>
<div class="text-center">
<code class="text-xs text-gray-400">{inp_hash[:16]}...</code>
<a href="{l1_server}/cache/{inp_hash}" target="_blank"
class="text-blue-400 hover:text-blue-300 text-xs ml-2">view</a>
</div>
</div>
'''
# Infrastructure display
@@ -989,15 +1002,26 @@ async def ui_asset_detail(name: str, request: Request):
else:
effect_url = f"{EFFECTS_REPO_URL}/src/branch/main/{recipe}"
# Build inputs display
# Build inputs display - show actual content as thumbnails
inputs_html = ""
for inp in inputs:
inp_hash = inp.get("content_hash", "") if isinstance(inp, dict) else inp
if inp_hash:
inputs_html += f'''
<div class="flex items-center gap-2 mb-2">
<a href="{l1_server}/cache/{inp_hash}" target="_blank"
class="text-blue-400 hover:text-blue-300 font-mono text-xs">{inp_hash[:24]}...</a>
<div class="bg-dark-500 rounded-lg p-3 mb-3">
<div class="flex justify-center mb-2">
<video src="{l1_server}/cache/{inp_hash}/mp4"
class="max-h-40 rounded hidden" muted loop playsinline
onloadeddata="this.classList.remove('hidden'); this.nextElementSibling.classList.add('hidden'); this.play();">
</video>
<img src="{l1_server}/cache/{inp_hash}" alt="Input"
class="max-h-40 rounded">
</div>
<div class="text-center">
<code class="text-xs text-gray-400">{inp_hash[:16]}...</code>
<a href="{l1_server}/cache/{inp_hash}" target="_blank"
class="text-blue-400 hover:text-blue-300 text-xs ml-2">view</a>
</div>
</div>
'''