WIP basic leaderboard

ServiceStack · Mar 28, 2024 · f8fe5b0 · f8fe5b0
1 parent b207558
commit f8fe5b0
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 5 deletions.
diff --git a/MyApp.ServiceInterface/LeaderboardServices.cs b/MyApp.ServiceInterface/LeaderboardServices.cs
@@ -49,7 +49,7 @@ public async Task<object> Any(CalculateLeaderBoard request)
             .Sum(y => y.WinRate);
 
 
-        var leaderBoard = new LeaderBoard
+        var leaderBoard = new CalculateLeaderboardResponse
         {
             MostLikedModels = statsByUser.Where(x => IsHuman(x.Id) == false)
                 .OrderByDescending(x => x.GetScore())
@@ -110,7 +110,7 @@ double CalculateWinRate(List<StatTotals> statTotalsList, string name, int questi
     }
 }
 
-public class LeaderBoard
+public class CalculateLeaderboardResponse
 {
     public List<ModelTotalScore> MostLikedModels { get; set; }
     public List<ModelTotalStartUpVotes> MostLikedModelsByLlm { get; set; }
@@ -168,7 +168,7 @@ public class LeaderBoardWinRateByTag
     public double WinRate { get; set; }
 }
 
-public class CalculateLeaderBoard
+public class CalculateLeaderBoard : IReturn<CalculateLeaderboardResponse>, IGet
 {
 
 }
diff --git a/MyApp/Components/Pages/Leaderboard.razor b/MyApp/Components/Pages/Leaderboard.razor
@@ -1,10 +1,34 @@
 @page "/leaderboard"
+@using MyApp.ServiceInterface
+@inherits AppComponentBase
 
 <PageTitle>Leaderboard</PageTitle>
 
 <div class="mt-8 mb-20 mx-auto max-w-fit">
-    <Heading1>Counter</Heading1>
+    <Heading1>Leaderboard</Heading1>
 
-    <div data-component="pages/Counter.mjs"></div>
+    <div class="mt-8">
+        @if (data != null)
+        {
+            <LeaderboardView LeaderBoardData="@data"/>
+        }
+    </div>
 
 </div>
+
+@code {
+
+    CalculateLeaderboardResponse? data;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        var api = await ApiAsync(new CalculateLeaderBoard());
+        if (api.Succeeded)
+            data = api.Response;
+        else
+            Console.WriteLine(api.Error?.Message);
+
+    }
+
+}
diff --git a/MyApp/Components/Shared/LeaderboardView.razor b/MyApp/Components/Shared/LeaderboardView.razor
@@ -0,0 +1,117 @@
+@using MyApp.ServiceInterface
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div class="bg-blue-500 text-white p-6 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold mb-4">Most Liked Models</h2>
+        <div class="space-y-4">
+            @foreach (var model in LeaderBoardData.MostLikedModelsByLlm.OrderByDescending(x => x.StartingUpVotes))
+            {
+                <div class="flex items-center">
+                    <img src="@GetAvatarUrl(model.Id)" alt="Avatar" class="w-12 h-12 rounded-full mr-4" />
+                    <div class="flex-1">
+                        <h3 class="text-lg font-semibold">@GetModelName(model.Id)</h3>
+                        <div class="text-sm text-green-200">@model.StartingUpVotes votes</div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <div class="bg-blue-500 text-white p-6 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold mb-4">Total Votes</h2>
+        <div class="space-y-4">
+            @foreach (var model in LeaderBoardData.ModelTotalScore.OrderByDescending(x => x.TotalScore))
+            {
+                <div class="flex items-center">
+                    <img src="@GetAvatarUrl(model.Id)" alt="Avatar" class="w-12 h-12 rounded-full mr-4" />
+                    <div class="flex-1">
+                        <h3 class="text-lg font-semibold">@GetModelName(model.Id)</h3>
+                        <div class="text-sm text-green-200">@model.TotalScore votes</div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <div class="bg-blue-500 text-white p-6 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold mb-4">Overall Win Rate</h2>
+        <div class="space-y-4">
+            @foreach (var model in LeaderBoardData.AnswererWinRate.OrderByDescending(x => x.WinRate))
+            {
+                <div class="flex items-center">
+                    <img src="@GetAvatarUrl(model.Id)" alt="Avatar" class="w-12 h-12 rounded-full mr-4" />
+                    <div class="flex-1">
+                        <h3 class="text-lg font-semibold">@GetModelName(model.Id)</h3>
+                        <div class="text-sm text-green-200">@(Math.Round(model.WinRate,2)) %</div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <div class="bg-blue-500 text-white p-6 rounded-lg shadow-lg">
+        <h2 class="text-2xl font-bold mb-4">Win Rate By Models</h2>
+        <div class="space-y-4">
+            @foreach (var model in LeaderBoardData.ModelWinRate.OrderByDescending(x => x.WinRate))
+            {
+                <div class="flex items-center">
+                    <img src="@GetAvatarUrl(model.Id)" alt="Avatar" class="w-12 h-12 rounded-full mr-4" />
+                    <div class="flex-1">
+                        <h3 class="text-lg font-semibold">@GetModelName(model.Id)</h3>
+                        <div class="text-sm text-green-200">@(Math.Round(model.WinRate,2)) %</div>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+</div>
+
+@code {
+    [Parameter]
+    public CalculateLeaderboardResponse LeaderBoardData { get; set; }
+
+    private string GetModelName(string modelId)
+    {
+        if (modelAliases.TryGetValue(modelId, out var alias))
+        {
+            return alias;
+        }
+        return modelId;
+    }
+
+    private string GetAvatarUrl(string modelId)
+    {
+        var userName = modelUserMapping.TryGetValue(modelId, out var value) ? value : modelId;
+        return $"/avatar/{userName}";
+    }
+
+    Dictionary<string, string> modelUserMapping = new()
+    {
+        { "mistral", "mistral" },
+        { "mixtral", "mixtral" },
+        { "mixtral-8x7b", "mixtral" },
+        { "mixtral-8x7b-32768", "mixtral"},
+        { "codellama", "codellama" },
+        { "deepseek-coder:6.7b", "deepseek-coder" },
+        { "deepseek-coder-6", "deepseek-coder"},
+        { "gemma-2b", "gemma-2b" },
+        { "gemma", "gemma" },
+        { "gemma-7b", "gemma" },
+        { "phi", "phi" }
+    };
+
+    Dictionary<string, string> modelAliases = new()
+    {
+        { "mistral", "Mistral 7B" },
+        { "mixtral", "Mixtral 8x7B" },
+        { "codellama", "Codellama" },
+        { "deepseek-coder:6.7b", "Deepseek Coder 6.7B" },
+        { "deepseek-coder-6", "Deepseek Coder 6.7B" },
+        { "gemma-2b", "Gemma 2B" },
+        { "gemma", "Gemma 7B" },
+        { "gemma-7b", "Gemma 7B" },
+        { "phi", "Phi" }
+    };
+
+}