Merge pull request #296 from AEtheve/add-nsfw-filter

Add NSFW filter in the settings

Author: divamgupta

electron_app/src/StableDiffusion.vue

@@ -28,7 +28,6 @@ export default {
         return {
             is_backend_loaded : false,
             is_input_avail : false,
-            nsfw_filter: true,
             model_loading_msg : "",
             model_loading_title : "",
             loading_percentage : -1 , 
@@ -60,7 +59,7 @@ export default {
 
                 // check for nsfw content
                 img.onload = () => {
-                    if (this.nsfw_filter == false) {
+                    if (this.$parent.app_state.app_data.settings.nsfw_filter == false) {
                         if (img.attached_cbs) {
                             if (img.attached_cbs.on_img)
                                 img.attached_cbs.on_img(impath);

electron_app/src/components/Settings.vue

@@ -5,8 +5,21 @@
             <h1>Settings</h1>
             <br>
             <h2>General Settings</h2>
-
-            <br><hr>
+            <br>
+            <div class="setting_box">
+            <div class="settings_left">
+            <h2>Block Adult Content</h2>
+            <p>Prevents image generation considered NSFW</p>
+            </div>
+            <hr>
+            <div style="float:right;margin-right: 9px;align-self: center;" >
+                <label class="switch">
+            <input type="checkbox" v-model="app_state.app_data.settings.nsfw_filter">
+            <span class="toggle round"></span>
+            </label>
+            </div>
+            </div>
+            <hr>
             <div class="l_button button_colored" style="float:right" @click="add_model"  >Add New Model</div>
             <h2>Custom Models</h2>
 
@@ -91,4 +104,68 @@ export default {
 <style>
 </style>
 <style scoped>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.toggle:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 23px;
+  left: 5px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .toggle {
+  background-color: #3E7BFA;
+}
+
+
+input:checked + .toggle:before {
+  transform: translateX(27px);
+}
+
+.toggle.round {
+  border-radius: 34px;
+}
+
+.toggle.round:before {
+  border-radius: 50%;
+}
+
+
+.setting_box{
+    display: flex;
+    flex-direction: row;
+}
+
+.settings_left{
+    flex: 1 1 auto;
+}
+
 </style>