Skip to content

Instantly share code, notes, and snippets.

@cTxplorer

cTxplorer/index.html

Last active October 18, 2018 09:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cTxplorer/29fff0513cab640a10e0fe19c4c875e5 to your computer and use it in GitHub Desktop.
Save cTxplorer/29fff0513cab640a10e0fe19c4c875e5 to your computer and use it in GitHub Desktop.
Download ZIP
comic - movie recommendation using subtitles
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css">
<script src="http://cmx.io/v/0.1/cmx.js" charset="utf-8"></script>
<style>.cmx-user-scene4 .cmx-text-border .cmx-path {stroke: orange}</style>
<body>
<div style="max-width:900px; -webkit-transform:rotate(0deg)">
<scene id="scene1">
<label t="translate(0,346)">
<tspan x="0" y="0em">One exciting morning</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(73,16) rotate(-2)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59">
<bubble t="translate(14,-8) rotate(2)" pose="0,0|-27,26|-86,61|13,97|-27,176|-73,109">
<tspan x="0" y="-5em">I have an idea!</tspan>
<tspan x="0" y="-3em">I want to watch</tspan>
<tspan x="0" y="-2em">Captain Marvel</tspan>
<tspan x="0" y="0em">but I'm not sure</tspan>
<tspan x="0" y="1em">how much would</tspan>
<tspan x="0" y="2em">I like the movie...</tspan>
<tspan x="8" y="4em">Or would I</tspan>
<tspan x="8" y="5em">dislike it?</tspan>
</bubble>
</actor>
<actor t="translate(153,17) rotate(-3)" pose="28,1|31,108|28,91|28,81|30,68|28,51|18,31|19,-2|33,26|38,1|23,71|18,51|38,71|38,51">
<bubble t="translate(-2,-9)" pose="-10,-3|-24,21|-46,66|17,25|-2,69|-45,90">
<tspan x="0" y="0em">you mean</tspan>
<tspan x="0" y="1em">an app to</tspan>
<tspan x="0" y="2em">predict your</tspan>
<tspan x="0" y="3em">rating!?</tspan>
</bubble>
</actor>
</scene>
<scene id="scene2">
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(71,19) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(-3,0)" pose="0,0|-12,22|-72,104|45,21|-37,182|-58,162">
<tspan x="0" y="-2em">Yes!
<tspan x="0" y="0em">people would use</tspan>
<tspan x="0" y="1em">simple interface</tspan>
<tspan x="0" y="2em">to <tspan fill="blue">predict</tspan></tspan>
<tspan x="0" y="3em">movie rating</tspan>
<tspan x="0" y="4em">and get personalized</tspan>
<tspan x="0" y="5em"><tspan fill="blue">recommendation</tspan></tspan>
</tspan></bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|30,107|28,91|28,81|28,71|28,51|18,31|13,1|33,26|38,1|23,71|18,51|38,71|38,51">
<bubble t="translate(-2,-9)" pose="0,0|6,30|13,63|-34,19|-23,51|-68,100">
<tspan x="0" y="1em">hmm, cool! that</tspan>
<tspan x="0" y="2em">sounds like an</tspan>
<tspan x="0" y="3em">exciting project.</tspan>
</bubble>
</actor>
</scene>
<scene id="scene3" height="230">
<label t="translate(0,225)">
<tspan x="0" y="0em">A few months later</tspan>
</label>
<actor t="translate(209,4) rotate(2)" pose="-41,48|-11,110|-4,87|-4,77|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-15,69|-8,53|13,85|-8,109">
<bubble t="translate(-2,-9)" pose="0,0|-13,15|-29,43|-102,7|-115,90|-165,83">
<tspan x="0" y="-1em">hey! I've finally done it</tspan>
<tspan x="0" y="1em"><tspan fill="red">I have used</tspan></tspan>
<tspan x="0" y="2em"><tspan fill="red">subtitles</tspan></tspan>
<tspan x="0" y="3em">to extract </tspan>
<tspan x="0" y="4em">essential keywords</tspan>
<tspan x="0" y="5em">along with</tspan>
<tspan x="0" y="6em">other available</tspan>
<tspan x="0" y="7em">metadata!</tspan>
</bubble>
</actor>
</scene>
<scene id="scene4" width="300" height="98" margin-y="3" frame="no">
<label t="translate(28,88)" pose="1,-23|-24,-31">
<tspan x="0" y="0em">~ better movie recommendation</tspan>
<tspan x="0" y="1em">~ user rating prediction</tspan>
<tspan x="0" y="2em">~ clean interface</tspan>
</label>
<actor t="translate(211,32)" pose="73,-56|69,46|73,34|93,22|81,12|82,1|66,-10|63,-39|79,-16|92,-30|63,19|42,19|65,11|36,4">
</actor>
</scene>
</div></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment