Hugging Face's logo

Spaces:
ashmib
/
green-city-finder
Running

App Files Community
1
thesab commited on
Commit
265555f
•
1 Parent(s): 32cae45

UI Enhancement with Emoticons for Improved User Experience

Browse files

This pull request introduces significant improvements to the user interface and visuals of the "Green City Finder" page. The key changes include:

Addition of Emoticons:
- Emoticons have been added to make the content more engaging and visually appealing.
- Specific emoticons are used to highlight key points and enhance text readability.
Improved Styling:
- Minor enhancements to the existing CSS to ensure a modern and responsive display.
- The use of existing HTML tags has been maintained, with the addition of emoticons for a more pleasant user experience.

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
+