Hugging Face's logo

Linaqruf
/
anime-detailer-xl-lora

Text-to-Image
Diffusers
Safetensors
English
stable-diffusion
lora
stable-diffusion-xl
Model card Files Community
4
Linaqruf commited on
Commit
dc63941
•
1 Parent(s): 55f3eea

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +108 -89
README.md CHANGED
@@ -22,104 +22,123 @@ widget:
22
  ---
23
 
24
  <style>
25
- .title-container {
26
- display: flex;
27
- flex-direction: column; /* Allow vertical stacking of title and subtitle */
28
- justify-content: center;
29
- align-items: center;
30
- height: 100vh;
31
- background-color: #f5f5f5;
32
- }
33
-
34
- .title {
35
- font-size: 2em;
36
- text-align: center;
37
- color: #333;
38
- font-family: 'Verdana', sans-serif;
39
- text-transform: uppercase;
40
- padding: 1em;
41
- box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
42
- }
43
-
44
- .title span {
45
- background: -webkit-linear-gradient(45deg, #ff9a9e, #fad0c4, #f6d365);
46
- -webkit-background-clip: text;
47
- -webkit-text-fill-color: transparent;
48
- }
49
-
50
- .gallery-container {
51
- max-width: 600px;
52
- margin: auto;
53
- text-align: center;
54
- position: relative;
55
- }
56
-
57
- .gallery-radio {
58
- display: none;
59
- }
60
-
61
- .gallery-image {
62
- display: none;
63
- width: 100%;
64
- margin: auto;
65
- }
66
-
67
- .gallery-image img {
68
- width: 100%;
69
- height: auto;
70
- border-radius: 10px;
71
- }
72
-
73
- #radio1:checked ~ #image1,
74
- #radio2:checked ~ #image2,
75
- #radio3:checked ~ #image3 {
76
- display: block;
77
- }
78
-
79
- .btn {
80
- display: inline-block;
81
- padding: 10px 20px;
82
- margin: 10px;
83
- background-color: #f0f0f0;
84
- color: black;
85
- border: none;
86
- border-radius: 5px;
87
- cursor: pointer;
88
- text-decoration: none;
89
- transition: background-color 0.3s;
90
- }
91
-
92
- .btn:hover {
93
- background-color: #ddd;
94
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  </style>
96
 
97
- <h1 class="title" style="text-align: center; font-family: Arial, sans-serif;">
98
  <span>Anime Slider XL LoRA</span>
99
  </h1>
100
 
101
  <div class="gallery-container">
102
- <input type="radio" name="gallery" id="radio1" class="gallery-radio">
103
- <input type="radio" name="gallery" id="radio2" class="gallery-radio" checked>
104
- <input type="radio" name="gallery" id="radio3" class="gallery-radio">
105
-
106
- <label for="radio1" class="btn">Image 1</label>
107
- <label for="radio2" class="btn">Image 2</label>
108
- <label for="radio3" class="btn">Image 3</label>
109
-
110
- <div id="image1" class="gallery-image">
111
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/RFtKV5Q6-8pWRzUA7AjOw.png" alt="sample1">
112
- </div>
113
- <div id="image2" class="gallery-image">
114
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/8_Z2IYeTOYJAMuFyJBRwX.png" alt="sample2">
115
- </div>
116
- <div id="image3" class="gallery-image">
117
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/0CyCkmFrWjPaBNLAwKMq8.png" alt="sample3">
118
- </div>
119
  </div>
120
 
121
 
122
-
123
  ## Overview
124
 
125
  **Anime Slider XL LoRA** is a cutting-edge LoRA adapter designed to work alongside Animagine XL 2.0. This unique model specializes in concept modulation, enabling users to adjust the level of detail in generated anime-style images. By manipulating a concept slider, users can create images ranging from highly detailed to more abstract representations.
 
22
  ---
23
 
24
  <style>
25
+ body {
26
+ font-family: 'Verdana', sans-serif;
27
+ background-color: #f5f5f5;
28
+ margin: 0;
29
+ padding: 0;
30
+ }
31
+
32
+ .title-container {
33
+ display: flex;
34
+ flex-direction: column;
35
+ justify-content: center;
36
+ align-items: center;
37
+ height: 100vh;
38
+ background-color: #f5f5f5;
39
+ }
40
+
41
+ .title {
42
+ font-size: 3em;
43
+ text-align: center;
44
+ color: #333;
45
+ text-transform: uppercase;
46
+ padding: 0.5em;
47
+ font-weight: bold;
48
+ }
49
+
50
+ .title span {
51
+ background: -webkit-linear-gradient(45deg, #ff9a9e, #fad0c4, #f6d365);
52
+ -webkit-background-clip: text;
53
+ -webkit-text-fill-color: transparent;
54
+ }
55
+
56
+ .gallery-container {
57
+ max-width: 90%;
58
+ margin: 20px auto;
59
+ text-align: center;
60
+ position: relative;
61
+ }
62
+
63
+ .gallery-radio {
64
+ display: none;
65
+ }
66
+
67
+ .gallery-image {
68
+ display: none;
69
+ width: 100%;
70
+ margin: 20px auto;
71
+ transition: opacity 0.3s ease;
72
+ }
73
+
74
+ .gallery-image img {
75
+ width: 100%;
76
+ height: auto;
77
+ border-radius: 10px;
78
+ transition: transform 0.3s ease;
79
+ }
80
+
81
+ .gallery-image img:hover {
82
+ transform: scale(1.05);
83
+ }
84
+
85
+ #radio1:checked ~ #image1,
86
+ #radio2:checked ~ #image2,
87
+ #radio3:checked ~ #image3 {
88
+ display: block;
89
+ }
90
+
91
+ .btn {
92
+ display: inline-block;
93
+ padding: 10px 20px;
94
+ margin: 10px;
95
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
96
+ color: white;
97
+ border: none;
98
+ border-radius: 25px;
99
+ cursor: pointer;
100
+ text-decoration: none;
101
+ transition: all 0.7s ease;
102
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
103
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
104
+ font-weight: bold;
105
+ }
106
+
107
+ .btn:hover, .btn:focus {
108
+ background: linear-gradient(135deg, #5b7de2, #8561c5);
109
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
110
+ }
111
+
112
+ .btn:active {
113
+ transform: translateY(1px);
114
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
115
+ }
116
  </style>
117
 
118
+ <h1 class="title">
119
  <span>Anime Slider XL LoRA</span>
120
  </h1>
121
 
122
  <div class="gallery-container">
123
+ <input type="radio" name="gallery" id="radio1" class="gallery-radio" aria-label="Less Detail">
124
+ <input type="radio" name="gallery" id="radio2" class="gallery-radio" checked aria-label="Normal">
125
+ <input type="radio" name="gallery" id="radio3" class="gallery-radio" aria-label="More Detail">
126
+ <label for="radio1" class="btn">Less Detail</label>
127
+ <label for="radio2" class="btn">Normal</label>
128
+ <label for="radio3" class="btn">More Detail</label>
129
+ <!-- Image Gallery -->
130
+ <div id="image1" class="gallery-image">
131
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/RFtKV5Q6-8pWRzUA7AjOw.png" alt="sample1" loading="lazy">
132
+ </div>
133
+ <div id="image2" class="gallery-image">
134
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/8_Z2IYeTOYJAMuFyJBRwX.png" alt="sample2" loading="lazy">
135
+ </div>
136
+ <div id="image3" class="gallery-image">
137
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6365c8dbf31ef76df4042821/0CyCkmFrWjPaBNLAwKMq8.png" alt="sample3" loading="lazy">
138
+ </div>
 
139
  </div>
140
 
141
 
 
142
  ## Overview
143
 
144
  **Anime Slider XL LoRA** is a cutting-edge LoRA adapter designed to work alongside Animagine XL 2.0. This unique model specializes in concept modulation, enabling users to adjust the level of detail in generated anime-style images. By manipulating a concept slider, users can create images ranging from highly detailed to more abstract representations.