';
var headerThumb = thumbUrl(url, 56, 56, r);
if (headerThumb) {
h += '';
} else if (rt === "raw") {
h += '
' + fileTypeIcon(r.format) + "
";
}
h += '
';
h += '
' + esc(name) + "
";
h += '
';
if (fmt) h += '' + esc(fmt) + "";
if (rt) h += '' + esc(rt) + (r.is_audio ? " (audio)" : "") + "";
if (dims) h += '' + dims + "";
if (dur) h += '' + dur + "";
if (size) h += '' + size + "";
h += "
";
h += '
';
if (url) h += '';
h += '';
h += "
";
h += "
";
// Hero
h += '
';
h += renderHeroPreview(r);
h += "
";
// Details content
h += '
';
h += sectionStart("asset_info");
h += 'Asset Info';
h += renderAssetGrid(r);
h += "";
h += renderAudioInfo(r);
h += renderVideoInfo(r);
h += renderTags(r.tags);
h += renderContext(r.context);
h += renderImageMetadata(r.image_metadata || r.media_metadata);
h += renderColors(r.colors, r.predominant);
h += renderModerationSection(r.moderation, r.moderation_kind, r.moderation_status);
h += renderAccessControl(r.access_control);
h += renderCoordinates(r.faces, r.coordinates);
h += renderLastUpdated(r.last_updated);
h += renderMetadata(r.metadata);
h += renderInfo(r.info);
h += renderDerived(r.derived, r.derived_next_cursor, r.asset_id);
h += renderDerivatives(r.derivatives);
h += renderRelatedAssets(r.related_assets);
h += renderVersions(r.versions);
h += renderEager(r.eager);
h += renderQualityAnalysis(r.quality_analysis, r.quality_score);
h += renderAccessibilityAnalysis(r.accessibility_analysis);
h += renderExtraFields(r);
h += renderRawResponse(r);
h += "
";
root.innerHTML = h;
renderThemeToggle();
// Event delegation
root.addEventListener("click", function handler(e) {
var el = e.target;
while (el && el !== root) {
if (el.id === "open-asset") {
app._rpc("ui/open-link", { url: url });
return;
}
if (el.id === "refresh-asset") {
fetchDirect();
return;
}
if (el.id === "load-more-derived-btn") {
loadMoreDerived(el);
return;
}
if (el.classList && el.classList.contains("link-val") && el.dataset.url) {
app._rpc("ui/open-link", { url: el.dataset.url });
return;
}
if (el.classList && el.classList.contains("derived-open") && el.dataset.url) {
app._rpc("ui/open-link", { url: el.dataset.url });
return;
}
el = el.parentElement;
}
});
}
function showFetchPrompt() {
var name = pendingCall.name || "get-asset-details";
var root = document.getElementById("app");
var h = '
';
h += '
\\u{1F4E6}
';
h += '
Could Not Display Results
';
h += '
';
h += "The response from " + esc(name) + " could not be rendered. ";
h += "You can try fetching the data directly from the server.";
h += "
";
h += '
';
h += '';
h += "
";
root.innerHTML = h;
renderThemeToggle();
document.getElementById("fetch-direct-btn").addEventListener("click", function() { fetchDirect(); });
}
async function fetchDirect() {
var name = pendingCall.name || "get-asset-details";
var args = pendingCall.args || {};
console.log(LOG_PREFIX, "tools/call ->", name, JSON.stringify(args));
document.getElementById("app").innerHTML = '
Fetching asset details\\u2026
';
try {
var res = await app.callServerTool({ name: name, arguments: args });
var data = ingestResult(res);
if (data && !data._error && !data._truncated && !data._parseError) {
renderPage(data);
} else if (data && data._error) {
showPersistentError("Server Error", data._message || JSON.stringify(data));
} else if (data && data._parseError) {
showPersistentError("Parse Error", data._message || "Could not parse response.");
} else if (data && data._truncated) {
showPersistentError("Truncated", "Response was truncated: " + (data._message || "").substring(0, 200));
} else {
showPersistentError("No Data", "Server returned no asset details.");
}
} catch (e) {
showPersistentError("Fetch Failed", e && e.message ? e.message : String(e));
}
}
app.ontoolinput = function(params) {
pendingCall.name = "get-asset-details";
if (params.arguments) pendingCall.args = params.arguments;
showReadyPrompt(pendingCall, fetchDirect);
};
app.ontoolcancelled = function(params) {
console.log(LOG_PREFIX, "tool cancelled:", params && params.reason);
showCancelledPrompt(pendingCall, fetchDirect);
};
app.ontoolresult = function(result) {
var data = ingestResult(result);
if (data && !data._error && !data._truncated && !data._parseError) {
console.log(LOG_PREFIX, "host result received for", data.asset_id || data.public_id);
renderPage(data);
return;
}
if (data && data._error) {
showPersistentError("Error", data._message || JSON.stringify(data));
return;
}
console.warn(LOG_PREFIX, "host result unusable:", data && data._message ? data._message.substring(0, 200) : "null");
showFetchPrompt();
};
app.connect().then(function() {
console.log(LOG_PREFIX, "ready");
setupResize(app, MIN_HEIGHT);
}).catch(function(err) {
showError("Connection Failed", err && err.message ? err.message : String(err));
});
`;
const ASSET_DETAILS_HTML = /* html */ `
Cloudinary Asset Details