Hugging Face's logo

Spaces:
ashmib
/
green-city-finder
Sleeping

App Files Community
1

UI Enhancement with Emoticons for Improved User Experience

#1
by thesab - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+136
-58
Files changed (1) hide show
  1. src/ui/templates/intro.html +136 -58
src/ui/templates/intro.html CHANGED
@@ -1,61 +1,139 @@
1
  <!-- intro.html -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  <body>
3
- <h1 style='font-size:xx-large; color: green; text-align: center'>🍀 Green City Finder 🍀</h1>
4
- <h3 style="text-align: center">AI Sprint 2024 submissions by Ashmi Banerjee.<sup>*</sup></h3>
5
- <br>
6
-
7
- <p style="text-align: justify">
8
- Tourism Recommender Systems (TRS) have traditionally focused on providing personalized travel suggestions, often
9
- prioritizing user preferences without considering broader sustainability goals.
10
- Integrating sustainability into TRS has become essential with the increasing need to balance environmental impact,
11
- local community interests, and visitor satisfaction.
12
- We enhance the traditional RAG system by incorporating a sustainability metric based on a city’s popularity and
13
- seasonal demand during the prompt augmentation phase.
14
- This modification, called <b>Sustainability Augmented Reranking (SAR)</b>, ensures the system's recommendations align with
15
- sustainability goals.
16
- </p>
17
-
18
- <p style="text-align: justify"><a href="https://arxiv.org/pdf/2403.18604">Sustainability score</a> for the retrieved
19
- destinations is calculated based on the following parameters:
20
- <ul>
21
- <li>Carbon footprint from the starting points to the retrieved cities using the greenest mode of travel (fly, drive,
22
- train)
23
- </li>
24
- <li>Overall popularity of the retrieved destinations based on their aggregated Tripadvisor reviews and opinions</li>
25
- <li>Seasonal footfall for the intended month of travel (if present)</li>
26
- </ul>
27
- </p>
28
- <p style="text-align: justify">
29
- We test our implementation with Google's <b>Gemini</b> models
30
- through VertexAI to generate sustainable travel recommendations.
31
- We use the Wikivoyage dataset to provide city recommendations based on user queries.
32
- The vector embeddings are stored and accessed in a VectorDB (LanceDB) hosted in Google Cloud.
33
- </p>
34
-
35
- <p style="text-align: justify">This is an extension of the following work. To <b>cite</b>, please use the following:</p>
36
-
37
- <blockquote>
38
- <p> [1] <b>Enhancing sustainability in Tourism Recommender Systems,</b> <i>Ashmi Banerjee, Adithi Satish, Wolfgang
39
- Wörndl</i>, In Proceedings of the 1st International Workshop on Recommender Systems for Sustainability and Social
40
- Good (RecSoGood 2024), co-located with ACM RecSys 2024, Bari, Italy.
41
- </p>
42
- </blockquote>
43
- <blockquote>
44
- <p> [2] <b>Modeling Sustainable City Trips: Integrating CO2e Emissions, Popularity, and Seasonality into Tourism Recommender Systems,</b> <i>Ashmi Banerjee, Tunar Mahmudov, Emil Adler, Fitri Nur Aisyah, Wolfgang
45
- Wörndl</i>, arXiv preprint <a href="https://arxiv.org/abs/2403.18604">arXiv:2403.18604 (2024)</a>.
46
- </p>
47
- </blockquote>
48
- <br>
49
- <p style="text-align: justify; font-weight: bold"><sup>*</sup>Google Cloud credits are provided for this project.</p>
50
- <h2 style='font-size:large; color: black; text-align: left'>Instructions</h2>
51
- <ul>
52
- <li>Select the country and city where you're located.</li>
53
- <li>Enter the search query; it has to be something for which the system can recommend cities.</li>
54
- <li>Click the <b>Search</b> button to find the most sustainable recommendations for your <b>starting
55
- position</b>.
56
- </li>
57
- <li>Click the <b>Clear</b> button to clear the fields.</li>
58
- </ul>
59
- <p style="text-align: justify; color: darkred">Note that this works best if you ask it for <span
60
- style="font-weight: bold; color: darkred; text-underline: darkred">city</span> recommendations.</p>
61
  </body>
 
 
 
1
  <!-- intro.html -->
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Green City Finder</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Arial', sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ line-height: 1.6;
13
+ color: #333;
14
+ background-color: #f9f9f9;
15
+ }
16
+
17
+ header {
18
+ text-align: center;
19
+ padding: 30px 20px;
20
+ background-color: #4CAF50;
21
+ color: #fff;
22
+ }
23
+
24
+ header h1 {
25
+ font-size: 2.5em;
26
+ margin: 0;
27
+ }
28
+
29
+ header h3 {
30
+ font-size: 1.2em;
31
+ margin: 10px 0 0;
32
+ }
33
+
34
+ main {
35
+ padding: 20px;
36
+ max-width: 800px;
37
+ margin: 0 auto;
38
+ background-color: #fff;
39
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
40
+ border-radius: 8px;
41
+ }
42
+
43
+ main p, main ul, main blockquote {
44
+ text-align: justify;
45
+ margin-bottom: 20px;
46
+ }
47
+
48
+ .sustainability-list {
49
+ padding-left: 20px;
50
+ }
51
+
52
+ .citation {
53
+ padding: 10px 20px;
54
+ background-color: #f0f0f0;
55
+ border-left: 5px solid #4CAF50;
56
+ border-radius: 5px;
57
+ margin-bottom: 20px;
58
+ }
59
+
60
+ .instructions {
61
+ background-color: #e8f5e9;
62
+ border-left: 5px solid #4CAF50;
63
+ padding: 15px 20px;
64
+ border-radius: 5px;
65
+ margin-bottom: 20px;
66
+ }
67
+
68
+ .instructions-header {
69
+ font-size: 1.5em;
70
+ margin-bottom: 10px;
71
+ }
72
+
73
+ .instructions ul {
74
+ padding-left: 20px;
75
+ }
76
+
77
+ .note {
78
+ color: darkred;
79
+ font-weight: bold;
80
+ text-align: center;
81
+ margin-top: 20px;
82
+ }
83
+
84
+ .note span {
85
+ text-decoration: underline;
86
+ }
87
+
88
+ a {
89
+ color: #4CAF50;
90
+ text-decoration: none;
91
+ }
92
+
93
+ a:hover {
94
+ text-decoration: underline;
95
+ }
96
+ </style>
97
+ </head>
98
  <body>
99
+ <header>
100
+ <h1>🍀 Green City Finder 🍀</h1>
101
+ <h3>AI Sprint 2024 submissions by Ashmi Banerjee.<sup>*</sup></h3>
102
+ </header>
103
+ <main>
104
+ <p>🧳 Tourism Recommender Systems (TRS) have traditionally focused on providing personalized travel suggestions, often prioritizing user preferences without considering broader sustainability goals. 🌍 Integrating sustainability into TRS has become essential with the increasing need to balance environmental impact, local community interests, and visitor satisfaction. We enhance the traditional RAG system by incorporating a sustainability metric based on a city’s popularity and seasonal demand during the prompt augmentation phase. This modification, called <b>Sustainability Augmented Reranking (SAR)</b>, ensures the system's recommendations align with sustainability goals.</p>
105
+
106
+ <p>📈 <a href="https://arxiv.org/pdf/2403.18604">Sustainability score</a> for the retrieved destinations is calculated based on the following parameters:</p>
107
+ <ul classclass="sustainability-list">
108
+ <li>🌿 Carbon footprint from the starting points to the retrieved cities using the greenest mode of travel (fly, drive, train).</li>
109
+ <li>🏆 Overall popularity of the retrieved destinations based on their aggregated Tripadvisor reviews and opinions.</li>
110
+ <li>📅 Seasonal footfall for the intended month of travel (if present).</li>
111
+ </ul>
112
+
113
+ <p>We test our implementation with Google's <b>Gemini</b> models through VertexAI to generate sustainable travel recommendations. We use the Wikivoyage dataset to provide city recommendations based on user queries. The vector embeddings are stored and accessed in a VectorDB (LanceDB) hosted in Google Cloud.</p>
114
+
115
+ <p>📝 This is an extension of the following work. To <b>cite</b>, please use the following:</p>
116
+ <div class="citation">
117
+ <p>[1] <b>Enhancing sustainability in Tourism Recommender Systems,</b> <i>Ashmi Banerjee, Adithi Satish, Wolfgang Wörndl</i>, In Proceedings of the 1st International Workshop on Recommender Systems for Sustainability and Social Good (RecSoGood 2024), co-located with ACM RecSys 2024, Bari, Italy.</p>
118
+ </div>
119
+ <div class="citation">
120
+ <p>[2] <b>Modeling Sustainable City Trips: Integrating CO2e Emissions, Popularity, and Seasonality into Tourism Recommender Systems,</b> <i>Ashmi Banerjee, Tunar Mahmudov, Emil Adler, Fitri Nur Aisyah, Wolfgang Wörndl</i>, arXiv preprint <a href="https://arxiv.org/abs/2403.18604">arXiv:2403.18604 (2024)</a>.</p>
121
+ </div>
122
+
123
+ <p style="font-weight: bold"><sup>*</sup> Google Cloud credits are provided for this project.</p>
124
+
125
+ <h2 class="instructions-header">📌 Instructions</h2>
126
+ <div class="instructions">
127
+ <ul>
128
+ <li>🌍 Select the country and city where you're located.</li>
129
+ <li>🔍 Enter the search query; it has to be something for which the system can recommend cities.</li>
130
+ <li>🖱️ Click the <b>Search</b> button to find the most sustainable recommendations for your <b>starting position</b>.</li>
131
+ <li>❌ Click the <b>Clear</b> button to clear the fields.</li>
132
+ </ul>
133
+ </div>
134
+
135
+ <p class="note">⚠️ Note that this works best if you ask it for <span>city</span> recommendations.</p>
136
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  </body>
138
+ </html>
139
+