Skip to content

Commit 214f3e3

Browse files
anyiraoanyirao
committed
add scriptviz project
1 parent e3d67d3 commit 214f3e3

15 files changed

+3187
-0
lines changed

‎img/representative.jpg ‎scriptviz/img/preview.mp4

12.2 MB
Binary file not shown.

‎scriptviz/img/teaser.jpg

1000 KB
Loading

‎scriptviz/index.html

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
6+
<!-- Replace the content tag with appropriate information -->
7+
<meta name="description" content="DESCRIPTION META TAG">
8+
<meta property="og:title" content="SOCIAL MEDIA TITLE TAG"/>
9+
<meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/>
10+
<meta property="og:url" content="URL OF THE WEBSITE"/>
11+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
12+
<meta property="og:image" content="static/image/your_banner_image.png" />
13+
<meta property="og:image:width" content="1200"/>
14+
<meta property="og:image:height" content="630"/>
15+
16+
17+
<meta name="twitter:title" content="TWITTER BANNER TITLE META TAG">
18+
<meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG">
19+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600-->
20+
<meta name="twitter:image" content="static/images/your_twitter_banner_image.png">
21+
<meta name="twitter:card" content="summary_large_image">
22+
<!-- Keywords for your paper to be indexed by-->
23+
<meta name="keywords" content="KEYWORDS SHOULD BE PLACED HERE">
24+
<meta name="viewport" content="width=device-width, initial-scale=1">
25+
26+
27+
<title>ScriptViz</title>
28+
<link rel="icon" type="image/x-icon" href="https://virtualfilmstudio.github.io/src_cinetransfer/images/favicon.ico">
29+
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
30+
rel="stylesheet">
31+
32+
<link rel="stylesheet" href="static/css/bulma.min.css">
33+
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
34+
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
35+
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
36+
<link rel="stylesheet"
37+
href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
38+
<link rel="stylesheet" href="static/css/index.css">
39+
40+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
41+
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
42+
<script defer src="static/js/fontawesome.all.min.js"></script>
43+
<script src="static/js/bulma-carousel.min.js"></script>
44+
<script src="static/js/bulma-slider.min.js"></script>
45+
<script src="static/js/index.js"></script>
46+
</head>
47+
<body>
48+
49+
50+
<section class="hero">
51+
<div class="hero-body">
52+
<div class="container is-max-desktop">
53+
<div class="columns is-centered">
54+
<div class="column has-text-centered">
55+
<h1 class="title is-2 publication-title">ScriptViz: A Visualization Tool to Aid Scriptwriting based on a Large Movie Database</h1>
56+
<div class="is-size-5 publication-authors">
57+
<!-- Paper authors -->
58+
<span class="author-block">
59+
<a href="https://anyirao.com/" target="_blank">Anyi Rao</a>,</span>
60+
<span class="author-block">
61+
<a href="https://www.linkedin.com/in/jeanpeicchou" target="_blank">Jean-Peïc Chou</a>,</span>
62+
<span class="author-block">
63+
<a href="https://graphics.stanford.edu/~maneesh/" target="_blank">Maneesh Agrawala</a></span>
64+
</div>
65+
66+
<div class="is-size-5 publication-authors">
67+
<span class="author-block">Standford University</span><br>
68+
<span class="author-block">ACM UIST 2024</span><br>
69+
</div>
70+
71+
<div class="column has-text-centered">
72+
<div class="publication-links">
73+
<!-- Arxiv PDF link -->
74+
<span class="link-block">
75+
<a href="" target="_blank"
76+
class="external-link button is-normal is-rounded is-dark">
77+
<span class="icon">
78+
<i class="fas fa-file-pdf"></i>
79+
</span>
80+
<span>Paper</span>
81+
</a>
82+
</span>
83+
84+
<!-- Supplementary PDF link -->
85+
<span class="link-block">
86+
<a href="https://brown.columbia.edu/portfolio/scriptviz-a-script-visualization-tool-based-on-a-large-movie-database/" target="_blank"
87+
class="external-link button is-normal is-rounded is-dark">
88+
<span>Brown Magic Grant</span>
89+
</a>
90+
</span>
91+
92+
<!-- Github link -->
93+
<span class="link-block">
94+
<a href="https://programs.sigchi.org/uist/2024/program/content/170838" target="_blank"
95+
class="external-link button is-normal is-rounded is-dark">
96+
<span>UIST Program</span>
97+
</a>
98+
</span>
99+
100+
<!-- ArXiv abstract Link -->
101+
<span class="link-block">
102+
<a href="" target="_blank"
103+
class="external-link button is-normal is-rounded is-dark">
104+
<span class="icon">
105+
<i class="ai ai-arxiv"></i>
106+
</span>
107+
<span>arXiv</span>
108+
</a>
109+
</span>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</section>
117+
118+
119+
<div class="container is-max-desktop">
120+
<div class="columns is-centered">
121+
<div class="column has-text-centered">
122+
123+
<section class="hero is-small">
124+
<div class="hero-body">
125+
<div class="container">
126+
<h2 class="title is-3">Preview</h2>
127+
<div class="item item-video4">
128+
<video poster="" id="video3" autoplay controls muted loop height="100%">\
129+
<!-- Your video file here -->
130+
<source src="img/preview.mp4" type="video/mp4">
131+
</video>
132+
</div>
133+
134+
</div>
135+
</div>
136+
</section>
137+
138+
139+
140+
<section class="hero is-small">
141+
<div class="hero-body">
142+
<div class="container">
143+
<h2 class="title is-3">Case Studies</h2>
144+
<img src="img/teaser.jpg" alt="MY ALT TEXT"/>
145+
<p class="content has-text-justified">
146+
A scriptwriter writes a main character “Dave", who is irritable and impulsive, trapped in a desert. She has a few
147+
sentences in her mind as shown in the top. She wants to choose an appropriate setting on time-of-day and the other character’s
148+
gender at the beginning of her creation. By setting these as variant attributes, she sees different visualizations in three rows
149+
and prefers the 3rd one. The night view she sees better reflects characters’ bad situations as they are tired for a whole day. The
150+
dead tree in the background strengthens this tension and also changes her script by adding details into it (bolded red text) at
151+
the bottom. These additions create a better main character by enhancing Dave’s personality. After seeing the visualization, it
152+
helps to add details that better reflect characters’ desperate situation.
153+
</p>
154+
</div>
155+
</div>
156+
</section>
157+
<!-- End video carousel -->
158+
159+
160+
161+
162+
</div>
163+
</div>
164+
</div>
165+
166+
167+
<section class="section" id="BibTeX">
168+
<div class="container is-max-desktop content">
169+
<h2 class="title">BibTeX</h2>
170+
<pre><code>@inproceedings{rao2024scriptviz,
171+
title={ScriptViz: A Visualization Tool to Aid Scriptwriting based on a Large Movie Database},
172+
author={Rao, Anyi and Chou, Jean-Pe{\"\i}c and Agrawala, Maneesh},
173+
booktitle={Proceedings of the 37th Annual ACM Symposium on User Interface Software and Technology},
174+
year={2024}
175+
}</code></pre>
176+
</div>
177+
</section>
178+
179+
180+
</body>
181+
</html>

‎scriptviz/static/css/bulma-carousel.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)