ieeeColors = ({
navy: "#2C3E50",
teal: "#16A085",
orange: "#E67E22",
gray: "#7F8C8D",
red: "#E74C3C",
green: "#27AE60",
purple: "#8E44AD",
blue: "#3498DB",
yellow: "#F1C40F",
darkGray: "#34495E",
lightGray: "#ECF0F1"
})
// Format definitions
formats = [
{ id: "json", name: "JSON", color: ieeeColors.orange, overhead: 1.0, encodeSpeed: 0.8, schemaRequired: false, humanReadable: true },
{ id: "msgpack", name: "MessagePack", color: ieeeColors.teal, overhead: 0.6, encodeSpeed: 0.4, schemaRequired: false, humanReadable: false },
{ id: "protobuf", name: "Protocol Buffers", color: ieeeColors.blue, overhead: 0.4, encodeSpeed: 0.3, schemaRequired: true, humanReadable: false },
{ id: "cbor", name: "CBOR", color: ieeeColors.purple, overhead: 0.55, encodeSpeed: 0.35, schemaRequired: false, humanReadable: false },
{ id: "avro", name: "Apache Avro", color: ieeeColors.green, overhead: 0.45, encodeSpeed: 0.5, schemaRequired: true, humanReadable: false },
{ id: "binary", name: "Raw Binary", color: ieeeColors.red, overhead: 0.25, encodeSpeed: 0.1, schemaRequired: true, humanReadable: false }
]
viewof priorities = Inputs.form({
sizeWeight: Inputs.range([0, 10], { label: "Size Priority", value: 7, step: 1 }),
speedWeight: Inputs.range([0, 10], { label: "Speed Priority", value: 5, step: 1 }),
flexWeight: Inputs.range([0, 10], { label: "Flexibility Priority", value: 4, step: 1 }),
compatWeight: Inputs.range([0, 10], { label: "Compatibility Priority", value: 6, step: 1 }),
debugWeight: Inputs.range([0, 10], { label: "Debuggability Priority", value: 3, step: 1 })
})
weightedScores = formats.map(f => {
const sizeScore = (1 - f.overhead) * 10;
const speedScore = (1 - f.encodeSpeed) * 10;
const flexScore = f.schemaRequired ? 4 : 8;
const compatScore = f.id === "json" ? 10 : f.id === "cbor" ? 7 : f.id === "msgpack" ? 6 : 5;
const debugScore = f.humanReadable ? 10 : 3;
const totalWeight = priorities.sizeWeight + priorities.speedWeight + priorities.flexWeight + priorities.compatWeight + priorities.debugWeight;
const weightedScore = totalWeight > 0 ? (
(sizeScore * priorities.sizeWeight +
speedScore * priorities.speedWeight +
flexScore * priorities.flexWeight +
compatScore * priorities.compatWeight +
debugScore * priorities.debugWeight) / totalWeight
) : 0;
return {
format: f,
scores: { size: sizeScore, speed: speedScore, flex: flexScore, compat: compatScore, debug: debugScore },
weightedScore: weightedScore.toFixed(2)
};
}).sort((a, b) => parseFloat(b.weightedScore) - parseFloat(a.weightedScore))
html`
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<div style="background: linear-gradient(135deg, ${weightedScores[0].format.color}, ${ieeeColors.navy}); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; text-align: center;">
<div style="font-size: 14px; opacity: 0.9;">Based on Your Priorities</div>
<div style="font-size: 28px; font-weight: bold; margin: 10px 0;">${weightedScores[0].format.name}</div>
<div style="font-size: 16px;">Score: ${weightedScores[0].weightedScore}/10</div>
</div>
<div style="display: grid; gap: 10px;">
${weightedScores.map((item, i) => html`
<div style="display: flex; align-items: center; gap: 15px; background: ${i === 0 ? ieeeColors.green + '15' : 'white'}; border: 1px solid ${i === 0 ? ieeeColors.green : ieeeColors.gray + '30'}; border-radius: 8px; padding: 15px;">
<div style="width: 30px; height: 30px; background: ${item.format.color}; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">
${i + 1}
</div>
<div style="flex: 1;">
<div style="font-weight: bold; color: ${item.format.color};">${item.format.name}</div>
<div style="font-size: 11px; color: ${ieeeColors.gray};">
Size: ${item.scores.size.toFixed(1)} | Speed: ${item.scores.speed.toFixed(1)} | Flex: ${item.scores.flex} | Compat: ${item.scores.compat} | Debug: ${item.scores.debug}
</div>
</div>
<div style="background: ${item.format.color}; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold;">
${item.weightedScore}
</div>
</div>
`)}
</div>
</div>
`